動態創建指令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和新的指令獲取變量輸入

回答

相關問題