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

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.

Answer 2

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.

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>

Answer 3

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

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

Answer 4

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.

From ng-if documentation.

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

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

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

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:

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

Answer 5

You can use ng-if=true to force a new scope each time you load a partial through ng-include.

Your code will look like

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

An example can be found at this plunker

Another answer referencing the same idea here

Answer 6

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

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>