Angular js - 使用服务

时间:2015-09-15 14:01:27

标签: angularjs angularjs-directive angularjs-service

菜单 - 控制器:

// Left Menu Start
'use strict';
 angular.module("MainApp")
   .controller('LeftMenuCtrl', function ($scope, $rootScope, actionCall) {

    $scope.notify = {};
    $scope.actionUrlCall = function(action)
    {
        actionCall.actionUrlCall(action, function(response){
            $scope.notify = actionCall.notify;
            console.log($scope.notify);
        });
    };
});

现在视野中有几个html页面:

每个人都有这些通知指令:

<div class="col-sm-12">
    <notification type="success"></notification>
    <notification type="error"></notification>
    <notification type="warning"></notification>
</div>

根据actionCall服务的输出显示通知。

我已登录控制台console.log($scope.notify);,我得到了所需的结果。问题是我不知道如何与具有不同控制器和不同范围的各种不同页面上的指令进行通信。

1 个答案:

答案 0 :(得分:0)

好的,这就是我最终解决问题的方法。

  1. 我创建了一项新服务(menu-service.js):

    'use strict';
    angular.module("MainApp")
    .factory('menuClick', function($rootScope) {
    var sharedService = {};
    sharedService.notify = {};
    
       sharedService.prepForBroadcast = function(msg) {
        this.broadcastItem();
    };
       sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };
       return sharedService;
    });
    
  2. 然后我在我的菜单控制器中注入了名为menuClick的服务,并在其中添加了一些行:

     angular.module("MainApp")
    
    .controller('LeftMenuCtrl', function ($scope, $rootScope, menuClick) {
        $scope.handleMenuClick = function(action) {
        menuClick.notify.warningNotify =  true;
        menuClick.notify.errorNotify =  true;
        menuClick.notify.successNotify =  true;
        if(!action.IsEnabled)
        {
            menuClick.notify.warningNotify = false;
            menuClick.notify.warningMessage = "This operation is disabled ( "+action.Text+" )";
            menuClick.prepForBroadcast(menuClick.notify);
        }
        };
       });
    
  3. 然后我将menuClick注入我需要监听广播数据的控制器,并在这些控制器中添加以下行:

     $scope.$on('handleBroadcast', function() {
         $scope.notify = menuClick.notify;
     });
    
  4. 它开始工作!!