未更新angularJS中的數據綁定 - UI未顯示$ scope變量中的更改

我遇到了AngularJS的問題，我在自定義服務上使用回調以便將數據從一個控制器傳遞到另一個控制器。

特別是，我試圖創建一個非常簡單的日誌記錄服務，其中一個控制器向服務器註冊偵聽器函數，以在消息記錄時接收更新，而另一個控制器在點擊UI（觸發第一個控制器中的監聽器）。

監聽器功能然後更新$scope.messages變量以在UI中顯示新記錄的消息。但是，當新到達的消息到達偵聽器函數時，UI不會更新。

我相信這是因爲AngularJS不知道$scope.messages正在更新。但是，試圖用$scope.$apply包裝$scope.messages的更新沒有帶來任何效果($apply already in progress)。

HTML代碼：

<div ng-app="myApp"> 
    <div ng-controller="ButtonCtrl"> 
     <button type="button" ng-click="logMessage()">Button</button> 
    </div> 
    <div id="console" ng-controller="ConsoleCtrl"> 
     <div ng-repeat="consoleItem in messages">{{consoleItem.message}}</div> 
    </div> 
</div>

JavaScript代碼：

var module = angular.module('myApp', []); 

module.factory('MyConsole', function($rootScope) { 
    var listeners = []; 
    var myConsoleService = {}; 

    myConsoleService.log = function(messageObj) { 
     angular.forEach(listeners, function(listener){ 
      listener(messageObj); 
     }); 
    }; 

    myConsoleService.registerListener = function(listener) { 
     listeners.push(listener); 
    }; 

    return myConsoleService; 
}); 

function ConsoleCtrl($scope, MyConsole){ 
    $scope.messages = [{"message":"First message!"}]; 
    MyConsole.registerListener(function(msgObj){ 
     // while this console.log call below works as expected, the $scope.messages.unshift call does not update the view 
     $scope.messages.unshift(msgObj.message); 
     console.log($scope.messages); 
    }); 
} 

function ButtonCtrl($scope, MyConsole) { 
    $scope.logMessage = function() { 
     MyConsole.log({message:"myLogmessage"}); 
    }; 
}

代碼也爲您提供方便被發現的jsfiddle：http://jsfiddle.net/G5LAY/3/

任何幫助將不勝感激:-)

謝謝！

來源

2013-02-25 Joris

你的代碼工作，它只是這行：$scope.messages.unshift(msgObj.message);只會增加消息字符串$scope.messages當你的模板期望$scope.messages是對象的列表來代替。所以把它改爲$scope.messages.unshift(msgObj);應該可以做到。

來源

2013-02-25 10:03:38

好吧，這只是令人尷尬...有時候，你只是需要別人看到這樣明顯的錯誤，我猜。謝謝！ – Joris 2013-02-25 10:51:39

未更新angularJS中的數據綁定 - UI未顯示$ scope變量中的更改

回答

相關問題