Angularjs广播和查询

时间:2016-02-13 11:44:08

标签: angularjs

我正在学习angularJS广播和发射。下面的代码似乎不起作用,即FirstCtrl和SecondCtrl没有接收广播消息。任何

<div ng-controller="FirstCtrl">
    <div ng-controller="SecondCtrl">  </div>    
</div>

var app = angular.module("myapp", []);

function FirstCtrl($scope){
    this.name = "xxxx";
    this.age  = 31;

    $scope.$on("message", function(e, opt){
        console.log("received message First");
    });
}
function SecondCtrl($scope){
    this.name = "yyyy";
    this.age  = 31;
    $scope.$on("message", function(e, opt){
        console.log("received message second");
    });

}

app.controller("FirstCtrl", FirstCtrl);
app.controller("SecondCtrl", SecondCtrl);
app.run(function($rootScope){
    $rootScope.$on("message", function(e,opt){
        console.log("root receive message");
    });

    $rootScope.$broadcast("message", { message : "root broadcast"});
});

3 个答案:

答案 0 :(得分:1)

这种情况正在发生,因为当public class Database { private Connection connection; private PreparedStatement statement1, statement2, ...; public Database(String url, String user, String pass) { Class.forName("com.mysql.jdbc.Driver").newInstance(); connection = DriverManager.getConnection(url, user, pass); statement1 = connection.prepareStatement("sql stuff"); statement2 = connection.prepareStatement("sql stuff"); // etc } public User getUser(int userId) { // execute getUser statement } // and other similar methods } 块正在执行时,没有一个控制器被实例化。

要解决此问题,请使用run,以便有足够的时间来实例化控制器:

$timeout

答案 1 :(得分:1)

你的例子说明了一个重点。在应用程序的生命周期中创建和销毁控制器。他们可能错过广播活动。另一方面,服务是单身,可在应用程序的整个生命周期内使用。所以在服务中记录你的事件。

app.factory("messageService", function($rootScope) {
     var lastMessage = {};
     function getMessage() { return lastMessage };
     function setMessage(m) { lastMessage = m };
     //record events
     $rootScope.$on("message" function(e,opt) {
          lastMessage.event = e;
          lastMessage.opt = opt;
     });
     return { getMessage: getMessage,
              setMessage: setMessage
            };
});

您的控制器可以“赶上”并订阅事件。

app.controller("FirstCtrl", function($scope,messageService) {
     //catch-up
     var message = messageService.getMessage();
     console.log(message.opt.message);
     //subscribe
     $scope.$on("message", function (e,opt) {
          message.event = e;
          message.opt = opt;
          console.log(message.opt.message);
     });
});

在您的运行块中,请务必注入messageService

app.run(function($rootScope, messageService){
    $rootScope.$on("message", function(e,opt){
        console.log("root receive message");
    });

    $rootScope.$broadcast("message", { message : "root broadcast"});
});

AngularJS框架实现了服务的惰性实例化。即使运行块不使用messageService,它也需要实例化以接收和记录广播事件。

答案 2 :(得分:0)

或者,您可以使用angular-PubSub来避免向必要的控制器发送事件。

$rootScope.$broadcast会向所有范围发送事件,如果您有很多控制器/范围,这些范围可能效率不高。在这种情况下,建议有效地使用PubSub模式。

注意请勿忘记取消订阅活动/主题以避免内存泄漏。