javascript-推送后未更新Angular ng-repeat
作者：互联网
我一直在努力与Angular一起努力,了解范围和不了解范围.
将新的“电线”插入我的阵列后,ng-repeat不会更新.我一直在阅读,可能是因为我添加数组时超出了我的数组范围(建议我可以添加到其他数组中),但事实并非如此吗？
这是我的代码
<body ng-app="wireApp" ng-controller="AddWireController">
<header>
<form role="form" class="form">
<div class="form-group">
<input type="text" placeholder="Description" class="form-control" name="wireDescription" ng-model="wire.description">
<input type="text" placeholder="URL" class="form-control" name="wireURL" ng-model="wire.URL">
<input type="text" placeholder="Tags" class="form-control" name="wireTags" ng-model="wire.tags">
<input type="text" placeholder="Groups" class="form-control" name="wireGroups" ng-model="wire.groups">
</div>
<button class="btn btn-primary btn-block" ng-click="addwire(wire)">Add+</button>
</form>
</header>
<div id="timeline" ng-controller="ListWireController">
<div ng-repeat="wire in wires">
<div class="timeline-entry">
<div class="timeline-stat">
<div class="timeline-icon bg-info"><i class="fa fa-envelope fa-lg"></i></div>
<div class="timeline-time">{{ wire.linLastTouched }}</div>
</div>
<div class="timeline-label">
<h4 class="text-info text-lg">{{ wire.linDescription }}</h4>
<p>{{ wire.tags }}</p>
</div>
</div>
</div>
</div>
</body>
这是javascript(角度)：
var wireApp = angular.module('wireApp', []);
//Parent controller
wireApp.controller('AddWireController', ['$scope', function($scope) {
$scope.addwire = function(wire) {
$.post('/wire/create', wire, function(data) {
$scope.$broadcast('addwire', data); //emit to children
});
};
}]);
//Child of AddWireController
wireApp.controller('ListWireController', ['$scope', function($scope) {
$scope.wires = [];
$scope.getwireByGroup = function(groupID) {
$.get('/wire/grpID=' + groupID, function(data) {
$.each(data.wires, function(index, key){
var newKey = key;
newKey.linLastTouched = jQuery.timeago(newKey.linLastTouched);
$scope.wires.push(newKey);
});
});
};
$scope.$on('addwire', function(event, mass) {
$scope.addwire(mass);
});
$scope.addwire = function(wire){
$scope.$apply(function() {
$scope.wires.push(wire);
});
}
//init data
$scope.getwireByGroup(0);
}]);
附加问题：
鉴于我使用$broadcast的方式,这迫使我在两个控制器之间建立关系,但是如果我不想在两者之间建立关系怎么办？我需要使用一家有前途的工厂吗？您能为我提供一个示例代码吗？
编辑：
首先,我要非常感谢Simon H和Keval Bhatt,因为他们帮助我理解了问题,而不仅仅是帮助我找到了解决方案.
这是工作代码(角度)：
var wireApp = angular.module('wireApp', []);
wireApp.factory('wireFactory', function($http){
var wires = [];
return {
getwireByGroup: function(groupID){
$http.get('/wire/grpID=' + groupID)
.success(function(data) {
$.each(data.wires, function(index, key){
var newKey = key;
newKey.linLastTouched = jQuery.timeago(newKey.linLastTouched);
wires.push(newKey);
});
});
return wires;
},
addwire: function(wire){
$http.post('/wire/create', wire)
.success(function(data) {
wires.push(data);
});
}
}
});
//Parent controller
wireApp.controller('AddWireController', function($scope, wireFactory) {
$scope.addwire = function(wire) {
wireFactory.addwire(wire);
};
});
//Child of AddwireController
wireApp.controller('ListWireController', function($scope, wireFactory) {
$scope.wires = [];
$scope.getwireByGroup = function(groupID) {
$scope.wires = wireFactory.getwireByGroup(groupID);
};
$scope.getwireByGroup(0);
});
解决方法:
原因是您将Angular与jQuery混合使用.当您使用Angular函数(例如$http)时,在接收到数据后,它会执行“摘要”操作,以更新视图.但是Angular不知道$.get会接收到数据,因此在这种情况下不会更新.
我的建议是放弃jQuery,转而使用角度方法.但是如果不能,那么每次您需要屏幕更新时,都添加一个$scope.$apply()
标签：angularjs,ng-repeat,javascript 来源： https://codeday.me/bug/20191119/2037040.html