Angular控制器与服务的通信

angular controller communication with a service

本文关键字：通信 服务 控制器 Angular      更新时间：2023-09-26

我想与另一个控制器通信。

var module = angular.module("app", []);
module.service("MessageAggregator", function(){
    var service = {};
    service.message = {};
    service.setMessage = function(message){
        service.message = message;
    };
    return service;
    });
    function firstController($scope, MessageAggregator){
        $scope.sendRequest = function(){
            MessageAggregator.setMessage({type: "FeatureSet"});
        };
    }
    function secondController($scope, MessageAggregator){
        $scope.info = MessageAggregator;
        $scope.message = MessageAggregator.message;
    }

我想在html视图中使用MessageAggregator服务数据。

<div ng-app="app">
    <div ng-controller="firstController">
        <button ng-click="sendRequest()">Request</button>
    </div>
    <hr/>
    <div ng-controller="secondController">
         <h3>info: {{info}}</h3>
         <h3>message: {{message}}</h3>
    </div>
</div>

工作代码在这里jsfiddle 

<h3>message: {{message}}</h3>  not populated and working
<h3>info: {{info}}</h3> is working

你应该让你的控制器在你的模块

module.controller("firstController", function($scope, MessageAggregator){
    $scope.sendRequest = function(){
        MessageAggregator.setMessage({type: "FeatureSet"});
    };
});
module.controller("secondController", function($scope, MessageAggregator){
    $scope.info = MessageAggregator;
    $scope.message = MessageAggregator.message;
});

您需要显式地为MessageAggregator.message对象添加监视侦听器:

$scope.$watch(function() { return MessageAggregator.message; },
  function(newVal, oldVal) { $scope.message = newVal; });

这是一个例子

或者您应该更改service.setMessage函数，如下所示以保留message对象引用:

service.setMessage = function (message) {
    for (var prop in message) {
        if (message.hasOwnProperty(prop)) {
            service.message[prop] = message[prop];
        }
        for(var prop in service.message){
            if(!message.hasOwnProperty(prop)){
                delete service.message[prop];
            }
        }
    }
};
相关文章：