Angularjs 使用ng repeat删除列表项时未删除转包元素_Angularjs_Angularjs Directive_Angularjs Ng Repeat

Angularjs 使用ng repeat删除列表项时未删除转包元素

angularjs

Angularjs 使用ng repeat删除列表项时未删除转包元素,angularjs,angularjs-directive,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,我用ng repeat实例化了一个小部件。最初的创建工作正常，但之后它会停止更新。以下是index.html的摘录： <div> <x-node ng-repeat="node in nodes"></x-node> </div> 如果我修改控制台中的节点列表，如下所示： var e = angular.element($0); var s = e.scope(); s.nodes.splice(1,1); s.$apply() 。。。然后

我用

ng repeat

实例化了一个小部件。最初的创建工作正常，但之后它会停止更新。以下是

index.html

的摘录：

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

如果我修改控制台中的节点列表，如下所示：

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

。。。然后，

$destroy

回调将运行，但呈现的元素不会更改。我的指令中有什么遗漏吗

演示：

这似乎确实是一个bug，在AngularJS的1.2系列中已经修复。它使用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>

node.html：

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

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

{{node.name}

模板不应该是

模板URL

？@JosephSilber啊，是的，确实是。谢谢，我在问题中解决了这个问题。@Arun，谢谢Plunker演示！我注意到，如果该模板包含在指令中而不使用templateUrl，它似乎可以工作……这可能是一个bug。您可能想关注。@Toshishimayama我明白了-还有一个错误：templateUrl目前似乎有一些问题。现在我只使用模板。谢谢

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

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