Question

我有以下指令：

app.directive("mydirect", function () {
    return {
        restrict: "E",
        templateUrl: "mytemplate.html",
    }
});

mytemplate.html的模板是：

<input ng-model="name{{comment.ID}}" ng-init="name{{comment.ID}}={{comment.Name}}"  />

我多次加载模板，每次我想更改分配为ng-model的变量，例如ng-model="name88"（comment.ID == 88）。

但是所有加载的模板都具有相同的值。

但是当我更改comment.ID时，所有插入的模板都会成为最后更改的ID。

Answer 1

首先，您不能在name{{comment.ID}}中添加ng-model等表达式 - 需要将其分配给变量。

因此，让我们将模板更改为：

<input ng-model="comment.ID" ng-init="comment.ID = comment.Name">

并不完全清楚你的意思是＆＃34;加载模板＆＃34;。如果您的意思是为每个mydirect对象创建一个comment指令，那么您可能会使用ng-repeat之类的内容（或者至少应该是这样）：

<div ng-repeat = "comment in comments">
  <mydirect></mydirect>
</div>

这很方便 - comment既是ng-repeat中使用的变量，也是用于指令模板的变量。但这不是太可重复使用。如果您想更改comment对象的结构怎么办？如果你想并排放置多个指令，而不是为ng-repeat的每次迭代创建子范围并为每个迭代分配一个不同的comment对象，该怎么办？

为此，您应该为指令使用隔离范围。你应该阅读更多关于它的here，但简而言之，它的工作方式是它允许你指定一个内部变量，它将在模板中使用并将它绑定到分配给元素的某个属性的任何变量该指令是在。上宣布的。

这样做是这样的：

app.directive("mydirect", function () {
    return {
        restrict: "E",
        scope: {
           // this maps the attribute `src` to `$scope.model` within the directive
           model: "=src" 
        },
        templateUrl: '<input ng-model="model.ID">',
    }
});

而且，让我们说你有：

$scope.comment1 = {ID: "123"};
$scope.comment2 = {ID: "545"};

然后你可以像这样使用它：

<mydirect src="comment1"></mydirect>
<mydirect src="comment2"></mydirect>

或者，如果您有一系列评论，无论是静态创建还是从服务调用加载，您都可以这样做：

<div ng-repeat = "comment in comments">
  <mydirect src="comment"></mydirect>
</div>

Angularjs在加载模板时分配元素的ngmodel

1 个答案: