angularjs將元素/指令從一個列表移動到另一個列表而不重新初始化

Question

讓圖像顯示我們有兩個元素列表，其中每個元素本身都是指令。

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]); 
    }; 
} 

Answer 1

因爲你的指令內使用，並ng-repeat，每一個項目除了將創建一個新的範圍，因此在指令控制器會每次初始化。然而，你可以用相反的方法做到這一點，即將你的列表綁定到指令並在模板中進行ng-repeat。請參閱Updated Fiddle。讓我知道這是否適合你。