即使使用$timeout,View也不会在angularjs中更新
View is not updating in angularjs even $timeout is used
即使模型更新,视图也不会更新。我在谷歌上搜索了这个问题,我得到了一些解决方案,使用setTimeout
或$timeout
功能。我尝试了上面的函数,但即使使用$timeout函数模型也会更新,而视图也不会。
我正在从一个服务中设置模型的值。当一个控制器在服务中设置值时,另一个控制器侦听该服务并更新其模型。
注意工厂服务
function loadNoteFactory($http) {
var baseURL = "SOME_URL";
var sessionId = "sessionId";
return {
getNotes: function() {
return $http.get(baseURL+"notes?"+sessionId);
},
addNote: function(note) {
return $http.post(baseURL+"note?"+sessionId, note);
},
editNote: function(tag, tagname) {
return $http.put(baseURL +"note/"+ note.id+"?"+sessionId, note);
},
deleteTag: function(tagId) {
return $http.delete(baseURL +"note/"+ note.id+"?"+sessionId);
}
};
}
工厂服务
function loadSelectedNoteFactory($rootScope){
var selectedNoteFactory = {};
selectedNoteFactory.note = {};
selectedNoteFactory.setCurrentNote = function(note) {
this.note = note;
$rootScope.$broadcast('noteChanged');
};
return selectedNoteFactory;
}
控制器 1 - 在服务中创造新的价值
function loadNoteListControllar($scope, NoteFactory, tagBasedNoteSearchService, selectedNoteFactory){
getUsersNotes();
function getUsersNotes(){
NoteFactory.getNotes().success(function(data) {
$scope.notes = data.notes;
selectedNoteFactory.setCurrentNote($scope.notes[0]);
});
}
$scope.onSelectNote = function(note){
selectedNoteFactory.setCurrentNote(note);
}
}
控制器 2 - 根据服务更改自行更新
function loadDetailControllar($scope, $timeout, selectedNoteFactory){
$scope.note = {};
$scope.$on('noteChanged', testme);
function testme(){
$timeout(function(){
$scope.note = selectedNoteFactory.note;
}, 500);
}
}
目录
<div class="tagWidget" ng-app="tagWidget">
<div class="notelistcontainer floatleft" ng-controller="NoteListController" style="width: 20%; height: 100%;">
<div class="notelist" style="border: solid 5px grey;">
<div class="noteitem greyborderbottom" ng-repeat="note in notes">
<div class="paddinglefttwentypx notesubject attachdotdotdot widthhundredpercent" ng-click="onSelectNote(note)">{{::note.subject}}</div>
</div>
</div>
</div>
<div class="detailview floatright" ng-controller="DetailController" style="width: 60%; height: 100%;">
<div class="paddinglefttwentypx notetext attachdotdotdot widthhundredpercent">{{::note.notehtmltext}}</div>
</div>
</div>
</div>
注入婴儿车,服务和指令
angular.module('tagWidget', [])
.factory('tagBasedNoteSearchService', loadTagBasedNoteSearchService)
.factory('NoteFactory', loadNoteFactory)
.factory('SelectedNoteFactory', loadSelectedNoteFactory)
.directive('editableDiv', loadEditableDiv)
.directive('toggleIcon', loadToggleIcon)
.controller('NoteListController', ['$scope', 'NoteFactory', 'tagBasedNoteSearchService', 'SelectedNoteFactory', loadNoteListControllar])
.controller('DetailController', ['$scope', '$timeout', 'SelectedNoteFactory', loadDetailControllar])
'tagBasedNoteSearchService', 'SelectedNoteFactory', loadTagControllar]);
解决方案 - 从表达式{{::note.notehtmltext}}
中删除::
相关文章:
- 如何在范围值更改时使用 angularJs 更新 UI
- 使用AngularJS更新cookie
- AngularJS更新控制器变量并再次渲染视图
- Angularjs 更新 setTimeout 中的范围变量不起作用
- 无法使用AngularJS更新变量
- 使用AngularJS更新下拉列表
- AngularJs 更新引导进度条
- AngularJS:更新资源的正确方法是什么
- AngularJS更新$scope变量并输出到pre
- 如何使用AngularJS更新/编辑数据库中的数据
- AngularJS更新ng-model的值以设置默认值
- AngularJs:更新事件$scope
- 使用 AngularJS 更新服务器
- 使用 AngularJS 更新表中的值的最佳实践
- Angularjs - 更新同一控制器的多个实例
- AngularJS更新范围$q
- angularJS更新第二数组值的数组基
- 尝试使用Firebase facebookconnect和AngularJS更新范围变量时出现问题
- 点击AngularJS更新Firebase中的字段
- 使用AngularJS更新Youtube上的400个错误请求