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