0

あるコントローラーから別のコントローラーにデータを渡すために、カスタム サービスでコールバックを使用する AngularJS で問題が発生しています。

特に、メッセージがログに記録されたときに更新を受け取るために、1 つのコントローラーがリスナー関数をサービスに登録し、UI のボタンがクリックされたときに別のコントローラーがメッセージをログに記録する、非常に単純なログ サービスを作成しようとしています (最初のコントローラーでリスナーをトリガーします)。

次に、リスナー関数が$scope.messages変数を更新して、新しくログに記録されたメッセージを UI に表示します。ただし、新しく到着したメッセージがリスナー関数に到着する間、UI は更新されません。

$scope.messagesこれは、AngularJS が更新されていることを認識していないためだと思います。$scope.messagesただし、 withの更新をラップしようとして$scope.$applyも無駄($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/

どんな助けでも大歓迎です:-)

ありがとう！

4

1 に答える 1

2

あなたのコードは機能しています。それは次の行だけです:テンプレートが代わりにオブジェクトのリストであると予想する場合に$scope.messages.unshift(msgObj.message);のみメッセージ文字列を追加します。したがって、それをに変更すると、うまくいくはずです。$scope.messages$scope.messages$scope.messages.unshift(msgObj);

于 2013-02-25T10:03:38.977 に答える