私が持っているモーダル ディレクティブのリファクタリングについてアドバイスが必要です。私はディレクティブを使い始めたばかりなので、私の問題に対する他のアプローチは大歓迎です。
私のプログラムには、目的のアクションを確認またはキャンセルできる確認モーダルが必要です。多くの場所に表示され、プログラム可能なボタンを使用できるようにする必要があります。キャンセルは、モーダルを非表示にするだけであるという点で一貫しており、確認ボタンは必要なアクションを実行する必要があります。
現在$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ます。
モーダル ディレクティブ コードは次のとおりです。
ディレクティブ.js
/* Confirm Modal */
.directive('confirmmodal', [function() {
return {
restrict: 'E',
templateUrl: 'view/templates/modal-confirm.tpl.html'
};
}])
次のコードのテンプレートとして機能します。
modal-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'
}
}
});
}]);
そのため、モーダル トリガー ディレクティブもコーディングしました。これは、モーダルでさまざまなアクションを実行するさまざまなトリガーを作成できるという考えです。
ディレクティブ.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、モーダルをトリガーできる my が見つかったビューでボタンを使用します。
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>
これは私が持っているもので、機能していますが、やり過ぎで、非効率的で、維持するのは悪夢のようです。誰でもこれを改善する方法を教えてもらえますか? 事前に感謝します。