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

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

Например, это мой основной шаблон (очень упрощенный, фактический шаблон сложнее, поэтому здесь нельзя использовать 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 в качестве шаблона? Спасибо


javascript angularjs templates
person Quentin    schedule 02.01.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Поскольку 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;
    }
});
person Quentin    schedule 09.01.2014

arrow_upward
1
arrow_downward

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

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

person Sean Doe    schedule 02.01.2014
comment
Хорошо, я попробую, однако будет ли привязка данных работать в этом случае? Я обновил свой пример более подробным примером. - person Quentin; 02.01.2014

arrow_upward
0
arrow_downward

Если ваши элементы имеют тот же формат, чем вы захотите использовать 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>...
person Stewie    schedule 02.01.2014
comment
Структура моего шаблона немного сложнее, чем в примере, поэтому я не могу использовать ng-repeat для выбора конкретного элемента. - person Quentin; 02.01.2014
comment
Что ж, в этом случае вам следует обновить свой вопрос, чтобы отразить все важные побочные эффекты. В противном случае вы проявляете неуважение к обществу. - person Stewie; 02.01.2014
comment
Да, я только что сделал это, не подумал о ng-repeat перед вашим ответом, сри - person Quentin; 02.01.2014