动态创建指令angularjs和新的指令获取变量输入

说我有名为foo以下指令：动态创建指令angularjs和新的指令获取变量输入

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

我用它像这样：

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

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

这可以使用angularJS来完成吗？

来源

2014-10-20 user2202911

首先，如果您打算重新使用<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()这里，不过是为了什么PLACEHOLD需要代表富数据的数据模型。你也可以这样做：$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一起玩。

来源

2014-10-20 19:21:42

动态创建指令angularjs和新的指令获取变量输入

回答

相关问题