Частичный шаблон angularjs с определенной областью применения

Question

Я хотел бы включить частичный шаблон в свой основной шаблон, но иметь определенную область видимости, когда я вызываю частичный шаблон.

Например, это мой основной шаблон (очень упрощенный, реальный шаблон более сложный, поэтому здесь нельзя использовать ng-iterate):

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

И myPartial.html это что-то вроде

<input ng-model="name" />...

данные:

{item1: {name:"test1"}, item2: {name: "test2"}}

ожидаемый результат:

<1>title, my item1 name is test1</h1>
....
<div><input value="test1" /></div>
....
<div><input value="test2"></div>
...

Как бы вы поступили с помощью angularjs?

Должен ли я создать специальную директиву с myPartial.html в качестве шаблона? Спасибо

Answer 1

Поскольку ng-view можно найти только один раз на странице, я использовал ng-include и ng-init чтобы инициализировать область действия конкретного контроллера:

<div ng-include="'/myPartial.html'" ng-init="init(items.item1)" ng-controller="YourController"></div>

контроллер:

this.app.controller("YourController", function YourController($scope) {
    $scope.init = function(item){
        $scope.item = item;
    }
});

Answer 2

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

а затем создать свой контроллер в качестве углового контроллера (или использовать существующий) и назначить данные $scope.item1

Answer 3

Если ваши элементы в том же формате, что и вы, вы захотите использовать ngInclude. Директива ngView используется для разных целей.

контроллер:

$scope.items = {item1: {name:"test1"}, item2: {name: "test2"}};

Основной вид:

<div ng-repeat="item in items" ng-include="'myPartial.html'"></div>

myPartial.html:

<h2>{{item.name}}</h2>...