Question

即使模型得到更新，视图也不会更新。我搜索了这个问题，我得到了一些使用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);
    }
}

Html

    <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>

注入Cotroller，服务和指令

    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]);

Answer 1

解决方案 - 从表达式::

中删除了{{::note.notehtmltext}}

即使使用$ timeout，视图也不会在angularjs中更新

1 个答案: