Переведенный элемент не удаляется при удалении элемента списка при использовании ng-repeat

У меня есть виджет, который я создаю, используя ng-repeat. Первоначальное создание работает нормально, но после этого оно перестает обновляться. Вот отрывок из index.html:Переведенный элемент не удаляется при удалении элемента списка при использовании ng-repeat

<div> 
    <x-node ng-repeat="node in nodes"></x-node> 
</div>

обертоны/node.html:

<div>{{node.name}}</div>

И директива:

angular.module('directive', []).directive('node', function() { 
    return { 
     restrict: 'E', 
     scope: true, 
     templateUrl: 'partials/node.html', 
     replace: true, 
     compile: function(tElement, tAttrs, transclude) { 
      return { 
       post: function(scope, iElement, iAttrs) { 
        scope.$on('$destroy', function(event) { 
         console.log('destroying'); 
        }); 
       } 
      }; 
     } 
    }; 
});

Если я изменить список узлов в консоли, как это:

var e = angular.element($0); 
var s = e.scope(); 
s.nodes.splice(1,1); 
s.$apply()

... затем выполняется обратный вызов $destroy, но отображаемые элементы не меняются. Есть что-то, что мне не хватает в моей директиве?

Демо: Plunker

источник

2013-04-23 z0r

не должны '' template' быть templateUrl'? –

@JosephSilber ах да, и это действительно так. Спасибо, я исправил это в вопросе. – z0r

@Arun, Спасибо за демонстрацию Plunker! Я замечаю, что если шаблон включен в директиву без использования templateUrl, он, похоже, работает ... – z0r

Кажется, это действительно ошибка, которая фиксируется в серии AngularJS 1.2. Here's an updated demo, который использует 1.2.

index.html:

<!DOCTYPE html> 
<html ng-app="my-app"> 

    <head lang="en"> 
    <meta charset="utf-8"> 
    <title>Custom Plunker</title> 

    <link rel="stylesheet" href="style.css"> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> 

    <script src="app.js"></script> 
    </head> 

    <body ng-controller="AppController"> 

    <div id="ct"> 
     <x-node ng-repeat="node in nodes"></x-node> 
    </div> 

    <button id="test">Remove element [1]</button> 
    </body> 

</html>

app.js:

var app = angular.module('my-app', [], function() { 

}) 

app.controller('AppController', function ($scope) { 

     $scope.nodes = [{ 
      name: 'one' 
     }, { 
      name: 'two' 
     }, { 
      name: 'three' 
     }]; 


}) 

app.directive('node', function() { 
    return { 
     restrict: 'E', 
     scope: true, 
     templateUrl: 'node.html', 
     replace: true, 
     compile: function(tElement, tAttrs, transclude) { 
      return { 
       post: function(scope, iElement, iAttrs) { 
        scope.$on('$destroy', function(event) { 
         console.log('destroying'); 
        }); 
       } 
      }; 
     } 
    }; 
}); 

$(function(){ 
    $('#test').click(function(){ 
    var el = $('#ct').children().first(); 
    if(el.length){ 
     var e = angular.element(el[0]); 
     var s = e.scope(); 
     s.nodes.splice(1,1); 
     s.$apply() 
    } 
    }) 
});

node.html:

<div>{{node.name}}</div>

источник

2014-08-08 00:34:37 z0r

Переведенный элемент не удаляется при удалении элемента списка при использовании ng-repeat

ответ

Смежные вопросы