AngularJs: ng-repeat 不更新服务列表

AngularJs: ng-repeat not updating with list from service

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 似乎卡住了。

我知道变通方法并且目前正在使用观察者模式,但我觉得这种行为不是故意的,所以我想知道我是否只是遗漏了什么或者这是一个错误。

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

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

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

http://plnkr.co/edit/Tog0IviB68dcahKYvfpe