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>

然后创建yourController作为角度控制器（或使用现有）并将数据分配给$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>...

angularjs具有特定范围的部分模板

3 个答案: