Позволяет создать изображение, в котором у нас есть два списка элементов, где каждый элемент является директивой.angularjs перемещает элемент/директиву из одного списка в другой без повторной инициализации
List 1:
- A
- B
- C
List 2:
- X
- Y
- Z
Я хочу, чтобы переместить элемент «Y» из списка 2 в список 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