I’d like to include a partial template inside my main template, but having a specific scope when I call the partial template.
For example, this is my main template (very simplified, actual template is more complicated, so ng-iterate can’t be used here) :
<h1>title, my item1 name is {{item1.name}}</h1>
....
<div ng-view="myPartial.html" scope="item1"></div>
....
<div ng-view="myPartial.html" scope="item2"></div>
...
And myPartial.html is something like
<input ng-model="name" />...
data :
{item1: {name:"test1"}, item2: {name: "test2"}}
expected result :
<1>title, my item1 name is test1</h1>
....
<div><input value="test1" /></div>
....
<div><input value="test2"></div>
...
How would you do this kind of thing using angularjs ?
Should I create a specific directive with myPartial.html as template ?
Thanks
As ng-view can only be found once in the page, I used ng-include and the ng-init to initialize the scope of the specific controller :
<div ng-include="'/myPartial.html'" ng-init="init(items.item1)" ng-controller="YourController"></div>
controller :
this.app.controller("YourController", function YourController($scope) {
$scope.init = function(item){
$scope.item = item;
}
});
In case your items are in same format than you will want to use ngInclude. ngView directive is used for different purposes.
Controller:
$scope.items = {item1: {name:"test1"}, item2: {name: "test2"}};
Main view:
<div ng-repeat="item in items" ng-include="'myPartial.html'"></div>
myPartial.html:
<h2>{{item.name}}</h2>...