このことは何度も取り上げられており、ほとんどの記事では次のコードが参照されています。AngularJS のカスタム URL を持つモーダル ウィンドウ
でも、私には理解できません。まったく明確ではないと思います。また、jsfiddleこれは実際には素晴らしく、非常に役立ちましたが、URL が追加されず、戻るボタンを使用してモーダルを閉じることができませんでした。
編集: これについて助けが必要です。
では、私が何を実現しようとしているのか説明してみましょう。新しいアイテムを追加するためのフォームがあり、「新しいアイテムを追加」というリンクがあります。「新しいアイテムを追加」をクリックすると、作成したフォーム「add-item.html」を含むモーダルがポップアップ表示されるようにしたいと思います。これは新しい状態なので、URL は /add-item に変わります。フォームに入力して、保存するか閉じるかを選択できます。閉じると、モーダルが閉じます :p (奇妙ですね)。ただし、「戻る」をクリックしてモーダルを閉じ、前のページ (状態) に戻ることもできます。 モーダルを実際に動作させるのにまだ苦労しているため、この時点では Close に関する支援は必要ありません。
これが現状の私のコードです:
ナビゲーション コントローラー:(これはモーダル関数を配置する正しい場所でしょうか?)
angular.module('cbuiRouterApp')
.controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
$scope.menu = [{
'title': 'Home',
'link': '/'
}];
$scope.open = function(){
// open modal whithout changing url
$modal.open({
templateUrl: 'components/new-item/new-item.html'
});
// I need to open popup via $state.go or something like this
$scope.close = function(result){
$modal.close(result);
};
};
$scope.isCollapsed = true;
$scope.isLoggedIn = Auth.isLoggedIn;
$scope.isAdmin = Auth.isAdmin;
$scope.getCurrentUser = Auth.getCurrentUser;
$scope.logout = function() {
Auth.logout();
$location.path('/login');
};
$scope.isActive = function(route) {
return route === $location.path();
};
});
モーダルをアクティブにする方法は次のとおりです。
<li ng-show='isLoggedIn()' ng-class='{active: isActive("/new-item")}'>
<a href='javascript: void 0;' ng-click='open()'>New Item</a>
</li>
新しいアイテム.html:
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items"><a ng-click="selected.item = item">{{ item }}</a></li>
</ul>Selected:<b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button ng-click="ok()" class="btn btn-primary">OK</button>
<button ng-click="close()" class="btn btn-primary">OK</button>
</div>
また、これによってモーダルは開きますが、閉じることはありません。その理由がわかりません。
ベストアンサー1
モーダルを状態のビュー コンポーネントと考えると直感的です。ビュー テンプレート、コントローラー、場合によってはいくつかの解決を含む状態定義を取ります。これらの各機能は、モーダルの定義にも適用されます。さらに一歩進んで、状態エントリをモーダルのオープンにリンクし、状態終了をモーダルのクローズにリンクします。すべての配管をカプセル化できれば、エントリを含む状態やエントリ用の状態、戻るui-srefボタン$state.go、または終了用のモーダル固有のトリガーと同じように使用できるメカニズムが得られます。
私はこれを研究しましたかなり広範囲に、そして私のアプローチは、モジュールを構成してモーダルにバインドされた状態を定義するときに類似して使用できるモーダル状態プロバイダーを作成することでした$stateProvider。当時、私は特に、状態とモーダルイベントを通じてモーダルの解除の制御を統合することに興味がありましたが、これはあなたが求めているよりも複雑になります。そこで、簡略化された例。
重要なのは、モーダルに状態の責任を持たせ、モーダルが提供するフックを使用して、スコープまたはその UI を通じてモーダルがサポートする独立したインタラクションと状態を同期させることです。
.provider('modalState', function($stateProvider) {
var provider = this;
this.$get = function() {
return provider;
}
this.state = function(stateName, options) {
var modalInstance;
$stateProvider.state(stateName, {
url: options.url,
onEnter: function($modal, $state) {
modalInstance = $modal.open(options);
modalInstance.result['finally'](function() {
modalInstance = null;
if ($state.$current.name === stateName) {
$state.go('^');
}
});
},
onExit: function() {
if (modalInstance) {
modalInstance.close();
}
}
});
};
})
状態エントリはモーダルを起動します。状態終了はモーダルを閉じます。モーダルは自動的に閉じる場合があるため (例: 背景クリックによる)、それを監視して状態を更新する必要があります。
このアプローチの利点は、アプリが主に状態と状態関連の概念と対話し続けることです。後でモーダルを従来のビューに変更したり、その逆を行ったりする場合でも、変更する必要のあるコードはほとんどありません。