Question

我有一个我正在使用ng-repeat实例化的小部件。初始创建工作正常，但在此之后它停止更新。以下是index.html的摘录：

<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

Answer 1

这似乎确实是一个bug，它在AngularJS的1.2系列中得到了修复。使用1.2的Here's an updated demo。

的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>

使用ng-repeat时，在删除列表项时不会删除已删除的元素

1 个答案: