不同的ng-include在同一个页面上:如何向每个变量发送不同的变量?

I've got a page in my AngularJS app in which I would like to include the same html partial, but with different variables. If I do this in my main html:

我在AngularJS应用程序中有一个页面，我想在其中包含相同的html部分，但是有不同的变量。如果我在主html中这样做:

<div id="div1" ng-include src="partials/toBeIncluded.html onload="var='A'">
<div id="div2" ng-include src="partials/toBeIncluded.html onload="var='B'">

And toBeIncluded.html looks like

和toBeIncluded。html的样子

<div>{{var}}</div>

Both div's will look like

两个div看起来都是这样的

<div id="div1"><div>B</div></div>
<div id="div2"><div>B</div></div>

I guess it has to do with the fact that the the same onload gets called for al the ng-includes. So how do I send different variables to each different include?

我猜这与一个事实有关，即相同的onload被调用给al，包括ng。那么如何将不同的变量传递给不同的include呢?

14 个解决方案

#1

The expression passed to onload evaluates every time a new partial is loaded. In this case you are changing the values of var twice so by the time both partials are loaded the current value will be B

每次加载一个新的部分时，传递给onload的表达式都会进行计算。在这种情况下，您将修改两次var的值，所以当两个部分都被加载时，当前值将是B

You want to pass different data to each partial/template (with the underlying html file being the same). To achieve this, as Tiago mentions, you could do it with different controllers. For example, consider the following

您希望将不同的数据传递给每个部分/模板(底层html文件是相同的)。要实现这一点，正如蒂亚戈提到的，您可以使用不同的控制器。例如，考虑以下内容

<body ng-controller='MainCtrl'>    
  <div ng-include src='"toBeIncluded.html"' ng-controller='ctrlA' onload="hi()"></div>
  <div ng-include src='"toBeIncluded.html"' ng-controller='ctrlB' onload="hi()"></div>
</body>

Here, we have two partials, each with its own scope managed from their own controller (ctrlA and ctrlB), both children scopes of MainCtrl. The function hi() belongs to the scope of MainCtrl and will be run twice.

在这里，我们有两个部分，每个部分都有自己的管理器(ctrl和ctrl)，两个子范围都是主控制的。函数hi()属于MainCtrl的范围，将运行两次。

If we have the following controllers

如果我们有下面的控制器

app.controller('MainCtrl', function($scope) {
  $scope.msg = "Hello from main controller";
  $scope.hi= function(){console.log('hi');};
});

app.controller('ctrlA', function($scope) {
  $scope.v = "Hello from controller A";
});

app.controller('ctrlB', function($scope) {
  $scope.v = "Hello from controller B";
});

And the contents of toBeIncluded.html are

以及要包含的内容。html是

<p>value of msg = {{msg}}</p>
<p>value of v = {{v}} </p>

The resulting html would be something along the following lines

生成的html将沿着以下几行

<p>value of msg = Hello from main controller</p>
<p>value of v = Hello from main controller A </p>

and

和

<p>value of msg = Hello from main controller</p>
<p>value of v = Hello from controller B </p>

Example here: http://plnkr.co/edit/xeloFM?p=preview

例子:http://plnkr.co/edit/xeloFM?p=preview

#2

Just like what Mark said, but to simplify it a little bit and make it more "on-the fly" is to use the following:

就像马克所说的，但是要简化一点，使它更“动态”，就要使用以下方法:

<div ng-repeat="name in ['John']" ng-include="'name-template.html'"></div>
<div ng-repeat="name in ['Jack']" ng-include="'name-template.html'"></div>

<script type="text/ng-template" id="name-template.html">
   <div>The name is {{ name }}</div>
<script>

Example here: http://jsfiddle.net/Cndc6/4/

例子:http://jsfiddle.net/Cndc6/4/

#3

In your comment on @jm-'s answer, you mention you want to load your partial inside ng-repeat. To do this, create an array on your $scope, and set the unique values on that array:

在您对@jm-的回答的评论中，您提到您希望在ng-repeat中加载您的部分内容。为此，在$范围上创建一个数组，并在该数组上设置惟一值:

$scope.partialStuff = [ 'p1', 'p2', 'p3' ];

Somewhere in your partial:

在你的部分:

{{partialVar}}

The HTML:

HTML:

<div ng-repeat="partialVar in partialStuff">
   <div ng-include src="'partials/toBeIncluded.html'"></div>
</div>

Fiddle.

小提琴。

#4

I could be wrong but wouldn't it be better to use a Directive?

我可能是错的，但是使用指令不是更好吗?

.directive('foobar', [function factory() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/toBeIncluded.html',
        scope: {
            "var": "="
        }
    };
}]);

And your HTML

和你的HTML

<div ng-repeat="var in data">
    <foobar var="var"></foobar>
</div>

Now the foobar element should be replaced with your template. Each having it's own scope.

现在，应该用模板替换foobar元素。每个人都有自己的范围。

#5

Specifically, ng-init and onload expressions are evaluated in the parent scope, not the child scope created by the nginclude. Thus you are assigning values to var on the parent scope twice, both of which are happening before the content inside those ng-includes is loaded compiled and evaluated. When each child scope is created it inherits from the parent scope, where var='B'.

具体地说，ng-init和onload表达式是在父范围内计算的，而不是nginclude创建的子范围。因此，您在父范围内将值赋值给var两次，这两种情况都发生在这些ng-include的内容被编译和评估之前。当创建每个子范围时，它从父范围继承，其中var='B'。

#6

consider you have variable foo inside your partial,

假设在偏微分中有变量foo，

then you will pass foo like this:

然后像这样传递foo:

<ng-include src="'partials/foo-part.html'" onLoad="foo='bar'"></ng-include>

for more browser compatibility you can pass it like this:

要获得更多的浏览器兼容性，你可以这样传递:

<div ng-include src="'partials/foo-part.html'" onLoad="foo='bar'"></div>

you can also Use onInclude="foo='bar'" instead of onLoad

您还可以使用onInclude="foo='bar "代替onLoad

plnkr.co/edit/GHRNyAMBKLvgtf3NFSRu?p=info

plnkr.co /编辑/ GHRNyAMBKLvgtf3NFSRu ? p = info

#7

The same "onLoad" does not get called for all ng-includes. Most likely, var is set to A, and then to B. The thing is, it is being shared across both includes, because they are on the same scope. ´var´, as a model in angularJS, is scope-dependant.

同样的“onLoad”不需要所有的ng包括。最可能的情况是，var被设置为A，然后是b。事情是，它在两个include之间共享，因为它们在同一个范围内。在angularJS´var´,作为一个模型,是scope-dependant。

In order for your partials to have separate values, they must each have their own scopes. The easiest way to do this would bet to set up a controller or directive and assign it to the Dom element where the ng-include is, and set your value within that scope.

为了使你的偏导数有单独的值，它们必须各自有各自的作用域。最简单的方法是设置一个控制器或指令并将其分配到包含ng的Dom元素中，并在该范围内设置值。

#8

I had the very same problem and I found a way to achieve what I wanted of course it does not look very pretty but still.

我遇到了同样的问题，我找到了一种实现我想要的东西的方法当然它看起来并不漂亮，但仍然。

I used the ng-repeat which will create a new scope to include the very same template twice with different values like so (dummy example):

我使用了ng-repeat，它将创建一个新的范围，包含相同的模板两次，具有不同的值如so(虚拟示例):

<script type="text/ng-template" id="mod-edito.html">
<div class="mod-edito__media">
    <img ng-src="{{ edito.cover.src }}" />
</div>
</script>

<div>
    <ng-include ng-repeat="edito in [edito_object]" src="'mod-edito.html'"></ng-include>
    ...
    <ng-include ng-repeat="edito in [edito_other]" src="'mod-edito.html'"></ng-include>
</div>

Is that acceptable? I guess so.

这是可以接受的吗?我想是这样。

#9

I was looking for an alternative, I wanted a js object to send a few parameters into the included partial. This is the evolved version of the one made by @denis-pshenov. You can use a controller to fill the data, or an ng-init.

我正在寻找一种替代方法，我想要一个js对象向包含的部分发送一些参数。这是由@denis-pshenov制作的进化版本。可以使用控制器填充数据，也可以使用ng-init。

Basically, something like this,

基本上是这样的,

var myApp = angular.module('myApp',[]);

myApp.controller('Controller', function($scope) {
    $scope.ourData = [ { name : 'John', address : 'Paradise' } ];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Controller">
    <div ng-repeat="data in ourData" ng-include="'partial.html'"></div>
    
    <div ng-init="ourData2 = [ { name : 'Jack', address : 'Paradise' } ]" />
    <div ng-repeat="data in ourData2" ng-include="'partial.html'"></div>
    
</div>

<script type="text/ng-template" id="partial.html">
   <div>The name is {{ data.name }} and the address is {{ data.address }} </div>
</script>

#10

There is a way to create a universal reusable directive.

有一种创建通用可重用指令的方法。

Here is what a colleague of mine had come up with (inspired by Knockout.js).

以下是我的一个同事的想法(受到Knockout.js的启发)。

Directive:

指令:

(function () {
    'use strict';

    angular
        .module('directives')
        .directive('ngWith', ngWith);

    function ngWith() {
        return {
            restrict: 'A',
            replace: true,
            scope: {
                model: '=',
                template: '@'
            },
            template: '<div data-ng-include="template"></div>',
        };
    }
})();

Usage:

用法:

<div data-ng-with="" data-model="parentObj.childObj.whatEver" data-template='my-template.html'></div>

#11

Just a heads up, if you include the partial within an ng-repeat, you can still have access to the parent scope's $index. Just include {{$index}} in the partial.

注意，如果在ng-repeat中包含部分内容，仍然可以访问父作用域的$索引。只在部分中包含{$index}。

#12

Using onload is not a clean solution because it litters the global scope. If you have something more complex, it'll start to fail.

使用onload并不是一种干净的解决方案，因为它在全局范围中占有一席之地。如果你有更复杂的东西，它就会开始失败。

Using a new directive instead of ng-include is a cleaner solution.

使用新的指令而不是ng-include是一个更干净的解决方案。

The ideal usage looks like:

理想的用法是:

<div ng-include-template="partials/toBeIncluded.html" ng-include-variables="{ var: 'A' }"></div>
<div ng-include-template="partials/toBeIncluded.html" ng-include-variables="{ var: 'B' }"></div>

The directive is:

该指令是:

.directive(
  'ngIncludeTemplate'
  () ->
    {
      templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
      restrict: 'A'
      scope: {
        'ngIncludeVariables': '&'
      }
      link: (scope, elem, attrs) ->
        vars = scope.ngIncludeVariables()
        for key, value of vars
          scope[key] = value
    }
)

You can see that the directive doesn't use the global scope. Instead, it reads the object from ng-include-variables and add those members to its own local scope.

您可以看到，该指令不使用全局范围。相反，它从ng-include-variables读取对象，并将这些成员添加到自己的本地范围中。

ng-include is not that reusable because it has access to the global scope. It's a little weird.

ng-include不是可重用的，因为它可以访问全局范围。这有点奇怪。

I hope this is what you would like; it's clean and generic.

我希望这就是你想要的;这是干净的和通用的。

#13

You may do it refer to features single values like $scope.a = 'test' and for objects like $scope.a = {a.test}; and use different scope to define visiblity area.

您可以引用单个值，比如$scope。a = 'test'和对象，如$scope。一个= {“};并使用不同的范围来定义可视区域。

From ng-if documentation.

从ng-if文档。

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored.

注意，当使用ngIf删除一个元素时，它的作用域被破坏，当元素恢复时，将创建一个新的作用域。

Simpe solution is to include ng-if and define you static conetent into ng-init directive.

Simpe解决方案是包含ng-if并将静态conetent定义为ng-init指令。

<div ng-if="<any-true-expression>" ng-init="val='First'" ng-include="'html/common.html'"</div>

<div ng-if="<any-true-expression>" ng-init="val='Second'" ng-include="'html/common.html'"</div>

In this case it will be show with different values like

在这种情况下，它将显示不同的值，如

{{val}} shows >>
First
Second

This Content is static because val is simpe reference to value.

这个内容是静态的，因为val是对值的simpe引用。

If you want to have dynamically changeable pages which depends on some common scope values you need to destroy and recreate scope that has been created when used directive ng-if. Like this:

如果您希望拥有动态变化的页面，而这些页面依赖于一些公共范围值，那么您需要销毁并重新创建在使用指示ng-if时创建的范围。是这样的:

<div id="wrapper" ng-if="orders_client">
       <div id="client-orders" ng-init="orders = orders_client" ng-include="'html/pages/parts/orders-view.html'"></div>
</div>

and

和

$scope.orders_client = null;
   /*recreate content table*/
     $timeout(function () {
        $rootScope.general.showPreloader = false;
        $scope.orders_client = $scope.baseData.clients[newClient];
     }, 500);

In this case scope with previously data will be destroyed and new scope with new data will be created. In need to time to recreate new scope 500ms. Please write if some better catch exist.

在这种情况下，将销毁先前数据的作用域，并创建具有新数据的新作用域。需要时间重新创建新的范围500ms。如果有更好的办法，请写信。

#14

-3

Just put each ng-include under its own <div> as following:

只需将每个ng-include放在它自己的

下，如下所示:

<div>
  <div id="div1" ng-include src="partials/toBeIncluded.html onload="var='A'"/>
</div>
<div>
  <div id="div2" ng-include src="partials/toBeIncluded.html onload="var='B'"/>
</div>

Each included HTML will then have its own var in its own scope.

每个包含的HTML都将在自己的范围内拥有自己的var。

#1