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

app.js:

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:

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>

A Plunker of it: http://plnkr.co/edit/frtVJlXvRAmlYLUW7BXL?p=preview

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

When I add an item via the add button, the ng-repeat only updates the first time. The list itself gets updated, as can be seen by behind the ng-repeat, where I just print {{list}}, but the ng-repeat seems to get stuck.

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

I am aware of workarounds and am using an observer pattern as of now, but I feel that this behaviour is not intended, so I would like to know if I am simply missing something or if this is a bug.

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

1 个解决方案

#1

Check your console messages and you'll see why. ng-repeat requires a unique identifier in determining where each item is bound. By adding multiple 'bla' strings to your list, you are adding duplicates that the directive doesn't know how to track changes to a specific item.

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

Use the track by syntax, and the issue will be fixed.

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

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

http://plnkr.co/edit/Tog0IviB68dcahKYvfpe

#1

Use the track by syntax, and the issue will be fixed.

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

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

http://plnkr.co/edit/Tog0IviB68dcahKYvfpe

秒客网

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

1 个解决方案

#1

#1

相关文章