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>

通知-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;

服务 - 控制器 - 指令AngularJS之间的交互

1 个答案: