即使使用$timeout,View也不会在angularjs中更新

View is not updating in angularjs even $timeout is used

本文关键字:angularjs 更新 View timeout      更新时间:2023-09-26

即使模型更新,视图也不会更新。我在谷歌上搜索了这个问题,我得到了一些解决方案,使用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}}中删除::