0

我有一个小部件，我正在使用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

4

1 回答 1

1

看来这确实是个 bug，在 AngularJS 1.2 系列中已经修复。这是使用 1.2的更新演示。

索引.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>

应用程序.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()
    }
  })  
});

节点.html：

<div>{{node.name}}</div>
于 2014-08-08T00:34:37.387 回答