angularjs partial template with specific scope

Question

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

Quentin · Accepted Answer · 2014-01-09 16:42:54Z

2

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;
    }
});

answered Jan 9, 2014 at 16:42

Quentin

3,3304 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sean Doe · Accepted Answer · 2014-01-02 11:47:32Z

1

<div ng-view="myPartial.html" ng-controller="yourController"></div>

and then create yourController as angular controller (or use existing) and assign data to $scope.item1

answered Jan 2, 2014 at 11:47

Sean Doe

2752 silver badges9 bronze badges

1 Comment

Quentin Over a year ago

Ok I'll try it, however will the data-binding still work in this case ? I updated my example with a more detailed example.

Stewie · Accepted Answer · 2014-01-02 11:47:11Z

0

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

answered Jan 2, 2014 at 11:47

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

3 Comments

Quentin Over a year ago

My template structure is a bit more complicated as in the example, so I can't use ng-repeat to select my specific item.

Stewie Over a year ago

Well, in that case you should update your question to reflect all the important side-effects. Otherwise you're disrespecting to the community.

Quentin Over a year ago

Yes I just did it, didn't think about ng-repeat before your answer, sry

Collectives™ on Stack Overflow

angularjs partial template with specific scope

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related