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

0

Что здесь происходит, некоторые элементы меню включены, а некоторые отключены в 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>

Уведомление-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;
});

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

  • 1
    Я не уверен, что полностью понимаю ваш вопрос, но я вижу, что вы делаете отдельные модули для каждой части вашего приложения :) здорово видеть, что больше людей делают это. У меня есть пример, который я собрал здесь . Посмотрите в app / shared / панель навигации. Здесь вы найдете директиву, которую я создал, чтобы добавить навигационную панель и контроллер. Надеюсь это поможет
  • 0
    @JoeLloyd есть только один модуль в коде OP, не знаю, что вы подразумеваете под отдельными модулями
Показать ещё 2 комментария
Теги:
angularjs-directive
angularjs-service

1 ответ

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; 
  • 0
    Спасибо, но вам все еще нужно повторить $ scope.handleMenuClick = menuClick.handleMenuClick; на каждый контроллер не так ли?
  • 0
    не обязательно, если меню помещено в директиву или просто использует свой собственный контроллер. Мы не знаем, как у вас настроены ваши взгляды
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню