2016-02-19 3 views
2

Позволяет создать изображение, в котором у нас есть два списка элементов, где каждый элемент является директивой.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]); 
    }; 
} 

ответ

0

Поскольку ваша директива используется внутри и ng-repeat, каждый пункт дополнение будет создать новую область и, таким образом, директива контроллер будет инициализируется каждый раз. Однако вы можете сделать это наоборот, т. Е. Привязать свой список к директиве и иметь ng-repeat в шаблоне. См. Updated Fiddle. Дайте мне знать, если это сработает для вас.

+0

Это не работает. Вы должны представить, что «моя-директива» очень сложная и глубокая. Следовательно, «entry» будет снова инициализирован (но один уровень глубже). См. [Обновленный скрипт вашей версии] (http://jsfiddle.net/kk1L54wL/). – mangei

+0

Ваш обновленный скрипт имеет синтаксическую ошибку и не запускается. Вы можете исправить это и снова опубликовать проблему? –

+0

Спасибо за подсказку. http://jsfiddle.net/kk1L54wL/1/ – mangei