2
讓圖像顯示我們有兩個元素列表,其中每個元素本身都是指令。angularjs將元素/指令從一個列表移動到另一個列表而不重新初始化
List 1:
- A
- B
- C
List 2:
- X
- Y
- Z
我想從列表2移動元素「Y」,以表1 沒有重新初始化指令。因此,我想簡單的內容/指令從表2移動到列表1.
我做了一個簡單的例子來說明我的意思:http://jsfiddle.net/HB7LU/24171/
正如你看到的例子,在控制檯打印「 init:Y'移動元素後再次。但我不想那樣。我只是想讓它移動。
如何在不重新初始化指令的情況下做到這一點?
template.html
<div ng-controller="MyCtrl">
<h2>List 1:</h2>
<ul>
<li ng-repeat="entry in list1">
<span my-directive="entry"></span>
</li>
</ul>
<h2>List 2:</h2>
<ul>
<li ng-repeat="entry in list2">
<span my-directive="entry"></span>
</li>
</ul>
<button ng-click="move()">
Move 'Y' to List 1
</button>
</div>
app.js
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
myDirective: '='
},
template: '{{myDirective}}',
controller: function($scope) {
console.log('init: ' + $scope.myDirective);
}
};
});
function MyCtrl($scope) {
$scope.list1 = ['A', 'B', 'C'];
$scope.list2 = ['X', 'Y', 'Z'];
$scope.move = function() {
var entries = $scope.list2.splice(1,1);
$scope.list1.push(entries[0]);
};
}
這不起作用。你必須想象,「我的指令」是一個非常複雜和深刻的問題。因此,'entry'仍然會被初始化(但是更深一層)。參見[更新版本的小提琴](http://jsfiddle.net/kk1L54wL/)。 – mangei
您更新的小提琴有語法錯誤,無法運行。你能糾正它,並重新發布的問題? –
感謝您的提示。 http://jsfiddle.net/kk1L54wL/1/ – mangei