Взаимодействие между-Service-Controller-Directive AngularJS

Question

Что здесь происходит, некоторые элементы меню включены, а некоторые отключены в ui. Поэтому, когда пользователь нажимает на элемент меню, который отключен, он дает ошибку на странице.

Я попытался решить проблему, используя angularjs-service и $ broadcast. Теперь дело в том, что каждая страница, включая левое меню, имеет разные контроллеры, поэтому мне нужно было повторить данные $ broadcast для каждого контроллера. Все, что я с нетерпением жду, это как я могу удалить эту избыточность?

левого Меню 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; 
}); 

левого Меню Controller.js

'use strict'; 
    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); 
     } 
    }; 

}); 

левой menu.html

<li> 
    <a ng-click="handleMenuClick(submenu)">{{submenu.Text}}</a> 
</li> 

Notification-Directive.js

'use strict'; 
angular.module("MainApp") 
.directive('notification', function() { 
    return { 
     restrict: 'E', 
     templateUrl: function (tElement, tAttrs) { 
      if (tAttrs.type) { 
       switch (tAttrs.type){ 
        case 'error': 
         return 'partials/template/show_error.html'; 
         break; 
        case 'success': 
         return 'partials/template/show_success.html'; 
         break; 
        case 'warning': 
         return 'partials/template/show_warning.html'; 
         break; 
       } 
      } 
     } 

    }; 
}); 

show_error.html

<div ng-hide="notify.errorNotify" ng-init="notify.errorNotify=true"> 

    <button type="button" ng-click="notify.errorNotify = !notify.errorNotify"></button> 
    <h2>{{notify.errorMessage}}</h2> 

</div> 

Контроллер-оф-все-в-страницах, где-это-директива-это-used.js

$scope.$on('handleBroadcast', function() { 
     $scope.notify = menuClick.notify; 
}); 

Я не знаю, как патч весь материал в самой директиве, чтобы можно было избежать повторения вышеуказанного кода во всех контроллерах. Благодаря!

Answer 1

Возможно, это не идеальный ответ, но поможет вам понять, как использовать сервис для обмена методами.

Перемещение объявления функции для $scope.handleMenuClick от контроллера к вашим услугам:

.factory('menuClick', function($rootScope) { 
    var sharedService = {}; 
    sharedService.notify = {}; 
    // new function 
    sharedService.handleMenuClick = function(action) { 
     sharedService.notify.warningNotify = true; 
     ....... 
     if(!action.IsEnabled) 
     ....... 
    } 
    ..... 
    return sharedService 
}) 

Тогда в контроллере вам нужна только ссылка методы в эксплуатации:

$scope.handleMenuClick = menuClick.handleMenuClick;