I'm trying to use ng-include with ng-init to re-use the same ponent by only changing its data.

The ponent code ("slider.html", which has no controller) looks like this:

<div ng-repeat="person in persons">
     {{person.name}}
</div>

From the main view, I want to reuse the same ponent changing "persons" list so in the view I have:

<!--slider #1 -->
<div ng-init="persons=english" ng-include ="'inc/app/views/widgets/slider.html'"></div>

<!-- slider #2 -->
<div ng-init="persons=german" ng-include ="'inc/app/views/widgets/slider.html'"></div>

and in the controller I initialize the 2 lists "english" and "german" like this:

 $scope.english = records.filter(function(t){return t.nationality=="english";});
 $scope.german = records.filter(function(t){return t.nationality=="german";});

What happens is that the 2 ponents shows the same list of data (german); is there a way to bind the 2 different sets to the ponents?

I'm trying to use ng-include with ng-init to re-use the same ponent by only changing its data.

The ponent code ("slider.html", which has no controller) looks like this:

<div ng-repeat="person in persons">
     {{person.name}}
</div>

From the main view, I want to reuse the same ponent changing "persons" list so in the view I have:

<!--slider #1 -->
<div ng-init="persons=english" ng-include ="'inc/app/views/widgets/slider.html'"></div>

<!-- slider #2 -->
<div ng-init="persons=german" ng-include ="'inc/app/views/widgets/slider.html'"></div>

and in the controller I initialize the 2 lists "english" and "german" like this:

 $scope.english = records.filter(function(t){return t.nationality=="english";});
 $scope.german = records.filter(function(t){return t.nationality=="german";});

What happens is that the 2 ponents shows the same list of data (german); is there a way to bind the 2 different sets to the ponents?

• javascript
• angularjs
• angularjs-scope
• angularjs-ng-init

Share Improve this question Follow asked Oct 27, 2014 at 17:08 DarioDario 6,29099 gold badges4141 silver badges5252 bronze badges 2

• 2 Looks like a good case for creating your slider widget as a custom directive rather than an ng-include so that you can keep your scope clean, provide a distinct interface, and avoid issues like @Roberto Linares pointed out. – mccainz Commented Oct 27, 2014 at 17:30
• I ended up writing a simple directive with an isolated scope and with "slider.html" as template – Dario Commented Oct 27, 2014 at 22:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

That (having both lists being set as German) happens because, at the end, you are only using one controller, which has only one scope in which the persons varaiable exists. When AngularJS starts its bootstrapping process, it processes the first ng-init, updating the current controller's persons variable to English. Then it processes the second ng-init, updating again the same persons variable now to German. Then, when the ng-repeat is rendered, it will take the current and unique persons variable data, hence, being everything in German.

What you can do is to have an independent controller per ponent (slider.html), so each controller will have its own binding variables so you can create a persons variable for each one and initialize every controller's variable independently with your ng-init directive. Example:

<div ng-controller="MySubController" ng-repeat="person in persons">
     {{person.name}}
</div>

...

<!--slider #1 -->
<div ng-init="initMySubController(english)" ng-include ="'inc/app/views/widgets/slider.html'"></div>

<!-- slider #2 -->
<div ng-init="initMySubController(german)" ng-include ="'inc/app/views/widgets/slider.html'"></div>

In a JS file:

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

myApp.controller('MySubController', ['$scope', function($scope) {
    $scope.persons = [];

    $scope.initMySubController = function(personsData) {
        $scope.persons = personsData;
    }
}]);