Что здесь происходит, некоторые элементы меню включены, а некоторые отключены в 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;
});
Я не знаю, как исправлять все вещи в самой директиве, чтобы можно было избежать повторения вышеуказанного кода во всех контроллерах. Благодарю!
Это не может быть идеальным ответом, но поможет вам понять, как использовать сервис для обмена методами.
Переместите объявление функции для $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;