gpt4 book ai didi

javascript - AngularJs:ng-repeat 未使用服务列表进行更新

转载 作者:行者123 更新时间:2023-11-28 15:20:11 25 4
gpt4 key购买 nike

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 需要唯一的标识符来确定每个项目的绑定(bind)位置。通过将多个“bla”字符串添加到列表中,您将添加指令不知道如何跟踪特定项目更改的重复项。

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

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

http://plnkr.co/edit/Tog0IviB68dcahKYvfpe

关于javascript - AngularJs:ng-repeat 未使用服务列表进行更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31860488/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com