0

我遇到了 AngularJS 的问题，我在自定义服务上使用回调，以便将数据从一个控制器传递到另一个控制器。

特别是，我正在尝试创建一个非常简单的日志记录服务，其中一个控制器向该服务注册一个侦听器函数，以便在记录消息时接收更新，而另一个控制器在单击 UI 中的按钮时记录一条消息（触发第一个控制器中的侦听器）。

侦听器函数然后更新一个$scope.messages变量以在 UI 中显示新记录的消息。但是，当新到达的消息到达侦听器函数时，UI 不会更新。

我相信这是因为 AngularJS 不知道$scope.messages正在更新。但是，尝试包装 with 的更新$scope.messages并$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 回答