Different ng-include's on the same page: how to send different variables to each?

Question

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:

Answer 1

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'.

Answer 2

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:

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

Somewhere in your partial:

{{partialVar}}

The HTML:

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

Fiddle.

Answer 3

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

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

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 is not that reusable because it has access to the global scope. It's a little weird.

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

Answer 4

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/

Answer 5

consider you have variable foo inside your partial,

then you will pass foo like this:

<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

plnkr.co/edit/GHRNyAMBKLvgtf3NFSRu?p=info

Answer 6

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

<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.