Question

说我有以下指令叫做foo：

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

我这样使用它：

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

我要做的是在每次点击按钮时动态添加foo指令，并且能够访问在此页面的相应控制器中创建的新模型变量。

可以使用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({});。

然后在视图中，只需ng-repeat你的fooModels：

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

这是一个plunker来玩。

动态创建指令angularjs并从new指令获取变量输入

1 个答案: