AngularJS: ng-从模型数组拼接模型元素时不更新重复列表
我有两个控制器，并通过app.factory函数在它们之间共享数据。
第一个控制器在单击链接时在模型数组(pluginsDisplayed)中添加一个小部件。将小部件推送到数组中，并将此更改反映到视图中(它使用ng-repeat来显示数组内容)：
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>该小部件基于三个指令构建: k2plugin、remove和resize。remove指令将跨度添加到k2plugin指令的模板中。当单击所述跨度时，将使用Array.splice()删除共享数组中的右侧元素。共享数组已正确更新，但更改是而不是反映在视图中的。但是，如果添加了另一个图元，则在删除后，视图将正确刷新，并且不会显示以前删除的图元。
我到底搞错了什么？你能给我解释一下为什么这个不起作用吗？有没有更好的方法来做我想用AngularJS做的事情？
这是我的index.html：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
<script src="main.js"></script>
</head>
<body>
<div ng-app="livePlugins">
<div ng-controller="pluginlistctrl">
<span>Add one of {{pluginList.length}} plugins</span>
<li ng-repeat="plugin in pluginList">
<span><a href="" ng-click="add()">{{plugin.name}}</a></span>
</li>
</div>
<div ng-controller="k2ctrl">
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
</div>
</div>
</body>
</html>这是我的main.js：
var app = angular.module ("livePlugins",[]);
app.factory('Data', function () {
return {pluginsDisplayed: []};
});
app.controller ("pluginlistctrl", function ($scope, Data) {
$scope.pluginList = [{name: "plugin1"}, {name:"plugin2"}, {name:"plugin3"}];
$scope.add = function () {
console.log ("Called add on", this.plugin.name, this.pluginList);
var newPlugin = {};
newPlugin.id = this.plugin.name + '_' + (new Date()).getTime();
newPlugin.name = this.plugin.name;
Data.pluginsDisplayed.push (newPlugin);
}
})
app.controller ("k2ctrl", function ($scope, Data) {
$scope.pluginsDisplayed = Data.pluginsDisplayed;
$scope.remove = function (element) {
console.log ("Called remove on ", this.pluginid, element);
var len = $scope.pluginsDisplayed.length;
var index = -1;
// Find the element in the array
for (var i = 0; i < len; i += 1) {
if ($scope.pluginsDisplayed[i].id === this.pluginid) {
index = i;
break;
}
}
// Remove the element
if (index !== -1) {
console.log ("removing the element from the array, index: ", index);
$scope.pluginsDisplayed.splice(index,1);
}
}
$scope.resize = function () {
console.log ("Called resize on ", this.pluginid);
}
})
app.directive("k2plugin", function () {
return {
restrict: "A",
scope: true,
link: function (scope, elements, attrs) {
console.log ("creating plugin");
// This won't work immediately. Attribute pluginname will be undefined
// as soon as this is called.
scope.pluginname = "Loading...";
scope.pluginid = attrs.pluginid;
// Observe changes to interpolated attribute
attrs.$observe('pluginname', function(value) {
console.log('pluginname has changed value to ' + value);
scope.pluginname = attrs.pluginname;
});
// Observe changes to interpolated attribute
attrs.$observe('pluginid', function(value) {
console.log('pluginid has changed value to ' + value);
scope.pluginid = attrs.pluginid;
});
},
template: "<div>{{pluginname}} <span resize>_</span> <span remove>X</span>" +
"<div>Plugin DIV</div>" +
"</div>",
replace: true
};
});
app.directive("remove", function () {
return function (scope, element, attrs) {
element.bind ("mousedown", function () {
scope.remove(element);
})
};
});
app.directive("resize", function () {
return function (scope, element, attrs) {
element.bind ("mousedown", function () {
scope.resize(element);
})
};
});回答 5
Stack Overflow用户
发布于 2013-03-18 20:19:53
无论何时在AngularJS之外执行某种形式的操作，比如使用jQuery进行Ajax调用，或者将事件绑定到像这里这样的元素，都需要让AngularJS知道如何自我更新。以下是您需要进行的代码更改：
app.directive("remove", function () {
return function (scope, element, attrs) {
element.bind ("mousedown", function () {
scope.remove(element);
scope.$apply();
})
};
});
app.directive("resize", function () {
return function (scope, element, attrs) {
element.bind ("mousedown", function () {
scope.resize(element);
scope.$apply();
})
};
});下面是它的文档：https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply
Stack Overflow用户
发布于 2013-03-18 20:19:54
如果你在$scope.pluginsDisplayed.splice(index,1);后面添加一个$scope.$apply();，那么它就可以工作。
我不确定为什么会发生这种情况，但基本上当AngularJS不知道$scope已更改时，它需要手动调用$apply。我也是AngularJS的新手，所以不能更好地解释这一点。我也需要更深入地研究一下。
我发现this awesome article很好地解释了这一点。注意:我认为使用ng-click (docs)可能比绑定到"mousedown“更好。我在这里写了一个简单的基于AngularJS的应用程序(http://avinash.me/losh，源http://github.com/hardfire/losh)。它不是很干净，但它可能会有帮助。
Stack Overflow用户
发布于 2016-07-04 15:56:26
我也有同样的问题。这个问题是因为'ng-controller‘被定义了两次(在路由和HTML中)。
https://stackoverflow.com/questions/15475601
复制相似问题