javascript - 动态创建指令 angularjs 并从新指令获取变量输入

Question

假设我有以下名为 foo 的指令:

<div>
<label>Enter foo: </label>
<input ng-model="myModel"/>
</div>

我这样使用它:

<foo></foo>
<button>Add foo: </button>

我想做的是在每次单击按钮时动态添加 foo 指令，并能够访问在该页面的相应 Controller 中创建的新模型变量。

这可以使用 angularJS 来完成吗？

Answer 1

首先，如果你打算重复使用<foo> ，那么你应该创建一个 isolated scope :

.directive("foo", function(){
   return {
      restrict: "E",
      scope: {
         data: "="
      },
      template: "<div><label>Enter foo: </label><input ng-model='data'/></div>"
   }
});

创建自定义指令或其他标记没有区别。在不太了解您在做什么的情况下，我可以提出以下建议:

app.controller("MainCtrl", function($scope)){
  $scope.fooModels = [];
  $scope.addFoo = function(){
      $scope.fooModels.push(new FooModel());
  };
}

FooModel()这里只是一个占位符，用于表示 foo 数据所需的任何数据模型。您也可以这样做:$scope.fooModels.push({}); .

然后在 View 中，简单的ng-repeat你的 fooModels:

<div ng-repeat="fooModel in fooModels">
  <foo data="fooModel.data"></foo>
</div>
<button ng-click="addFoo()">Add Foo</button>

这是一个plunker一起玩。