0
我需要一些關於重構我有的模態指令的建議。我剛剛開始使用指令，所以對我的問題採取其他任何方法都是值得歡迎的。AngularJS：重構確認模態指令
我的程序需要確認模式，我們可以確認或取消所需的操作。它會出現在很多地方，需要有一個可編程的按鈕。取消是一致的，因爲它只會隱藏模式，確認按鈕需要執行所需的任何操作。
我目前使用$rootScope來顯示/隱藏/配置模態。這是一個壞主意嗎？請告訴我。
這就是我的工作與現在（大概，因爲我已經削減了很多其他不必要的代碼）：
的index.html
<!doctype html>
<html lang="en">
<head>
<title>My App</title>
</head>
<body ng-controller="MenuCtrl">
<confirmmodal ng-show="$root.confirmModal.isVisible"></confirmmodal>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div ng-view></div>
<!-- build:js scripts/main.js -->
<script data-main="scripts/main" src="lib/requirejs/require.js"></script>
<!-- endbuild -->
</body>
</html>
所以我坐在模式在ng-view之上，並且可以從任何地方調用。它位於僞全局控制器內，稱爲MenuCtrl。
這裏是模態指令代碼：
directives.js
/* Confirm Modal */
.directive('confirmmodal', [function() {
return {
restrict: 'E',
templateUrl: 'view/templates/modal-confirm.tpl.html'
};
}])
它作爲下面的代碼模板：
模式，confirm.tpl.html
<!-- Confirm Modal Template -->
<div class="overlay">
<div class="overlay-content extended">
<span>{{$root.confirmModal.content}}</span>
<div class="buttons">
<button class="btn btn-default" ng-click="$root.confirmModal.secondary.action()">{{$root.confirmModal.secondary.content}}</button>
<button class="btn btn-primary" ng-click="$root.confirmModal.primary.action()">{{$root.confirmModal.primary.content}}</button>
</div>
</div>
</div>
我設置了一堆違約的app.run功能：
app.js
app.run(['$rootScope', function ($rootScope) {
_.extend($rootScope, {
confirmModal: {
isVisible: false,
content: '',
primary: {
action: function() {
console.log('hello world');
},
content: 'Submit'
},
secondary: {
action: function() {
$rootScope.confirmModal.isVisible = false;
},
content: 'Cancel'
}
}
});
}]);
所以我還編寫了一個模式觸發指令，該想法是，我可以創建不同的觸發器用模態執行不同的操作。
directives.js
/* Resolve Event */
.directive('resolveevent', ['RequestService', '$location', function (RequestService, $location) {
return {
restrict: 'A',
scope: {
eventtype: '@',
eventid: '@',
index: '@'
},
controller: ['$scope', function($scope) {
$scope.remove = function(id) {
// remove the event from the events array
$scope.$parent.$parent.$parent.$parent.events.splice(id, 1);
},
$scope.config = function(config) {
_.extend($scope.$root.confirmModal, config);
},
$scope.isVisible = function() {
$scope.$apply(function() {
$scope.$root.confirmModal.isVisible = true;
});
}
}],
link: function($scope, element, attrs) {
var config = {
content: 'Are you sure you wish to resolve this event?',
primary: {
action: function() {
var config = {
url: '/Events/' + $scope.eventid,
method: 'PUT',
data: {
event_status: 'resolved'
},
cache: false
}
/* Update event with resolved status */
RequestService.makeApiRequest(config).success(function(response) {
$scope.$root.confirmModal.isVisible = false;
$scope.remove($scope.index);
});
},
content: 'Resolve Event'
}
}
element.on('click', function() {
if (!$scope.$root.confirmModal.isVisible) {
$scope.config(config);
$scope.isVisible();
}
});
}
}
}]);
然後我用在我的ng-repeat找到該視圖，它能夠觸發模式按鈕：
eventlist.html
<li ng-repeat="event in events">
<p>Event: {{ event.number }}</p>
<p>Group: {{ event.group_name }}</p>
<p>Record Date: {{ event.event_date | moment: 'MM/DD/YYYY h:mm A' }}</p>
<button resolveevent index="{{$index}}" eventid="{{ event.number }}" class="btn btn-default">Resolve</button>
</li>
這是我得到的，它正在工作，但它看起來像是矯枉過正，效率低下，而且是維護的噩夢。任何人都可以通過一種方式來改善這種狀況？感謝任何幫助，提前致謝。
你有沒有考慮使用角度-UI-引導模塊？它有一個可用的模式窗口，並且需要更少的代碼。 http://angular-ui.github.io/bootstrap/ –