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

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

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

输入foo:

我是这样使用它的：

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

添加foo:

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

---

这可以用angularJS实现吗

首先，如果您计划重新使用

，那么您应该创建一个：

FooModel（）

这里只是表示foo数据所需的任何数据模型的放置点。您也可以这样做：

$scope.fooModels.push（{}）

然后在视图中，只需重复您的模型：

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


添加Foo

这里有一个游戏

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

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