Question

app.js：

var app = angular.module('myApp',
[]);

app.controller('ExampleController', ['$scope', 'myService', function($scope, myService) {
  $scope.titles=myService.list;
  $scope.controllerFunction = function() {
    myService.list.push("bla");
  };
}]);

app.service('myService',[ function(){

  return {
    list: ['test', 'test2', 'test3']
  };
}]);

app.directive('myDirective',['myService', '$compile', function(myService, $compile) {

  return {
    scope: true,
    link: function($scope, $element, attrs, ctrl, $transclude) {

      $scope.list = myService.list;


    },
    template: '<div ng-repeat="item in list">{{item}}</div>{{list}}'

  };
}]);

的index.html：

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

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="ExampleController">
      <my-directive></my-directive>

      <button ng-click="controllerFunction()">add</button>
    </div>
  </body>

</html>

它的一个吸引力：http://plnkr.co/edit/frtVJlXvRAmlYLUW7BXL?p=preview

当我通过添加按钮添加项目时，ng-repeat仅在第一次更新时更新。列表本身会更新，正如ng-repeat后面所示，我只打印{{list}}，但ng-repeat似乎卡住了。

我知道解决方法，并且现在使用的是观察者模式，但我觉得这种行为不是故意的，所以我想知道我是否只是遗漏了某些内容，或者这是否是一个错误。

Answer 1

检查您的控制台消息，您将看到原因。 ng-repeat在确定每个项目的绑定位置时需要唯一标识符。通过在列表中添加多个“bla”字符串，您将添加指令不知道如何跟踪特定项目更改的重复项。

使用track by语法，问题将得到解决。

<div ng-repeat="item in list track by $index">{{item}}</div>{{list}}

http://plnkr.co/edit/Tog0IviB68dcahKYvfpe

AngularJs：ng-repeat不用服务列表更新

1 个答案: