31

これは何度も取り上げられており、ほとんどの記事で次のコードが参照されています: AngularJS のカスタム URL を使用したモーダル ウィンドウ

しかし、私はそれを理解していません。私はそれが非常に明確であるとはまったく思いません。私はまた、これがURLを追加せず、戻るボタンを使用してモーダルを閉じることを可能にすることを除いて、実際には素晴らしく、非常に役立つこのjsfiddleを見つけました。

編集：これは私が助けを必要としているものです。

それでは、私が達成しようとしていることを説明してみましょう。新しいアイテムを追加するフォームがあり、「新しいアイテムを追加」リンクがあります。「新しい項目を追加」をクリックすると、作成したフォーム「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>

new-item.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>

また、これはモーダルを開きますが、それを解決できなかったため、閉じません。

4

4 に答える 4

56

モーダルを状態のビュー コンポーネントと考えるのは直感的です。ビュー テンプレート、コントローラー、およびおそらくいくつかのリゾルブを使用して状態定義を取得します。これらの各機能は、モーダルの定義にも適用されます。さらに一歩進んで、ステート エントリをモーダルの開始にリンクし、状態の終了をモーダルのクローズにリンクします。すべての配管をカプセル化できれば、エントリと戻るボタンが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();
                }
            }
        });
    };
})

ステート エントリはモーダルを起動します。状態出口はそれを閉じます。モーダルは自然に閉じる可能性があるため (例: 背景のクリックによって)、それを観察して状態を更新する必要があります。

このアプローチの利点は、アプリが主に状態および状態関連の概念と対話し続けることです。後でモーダルを従来のビューに、またはその逆に変更することにした場合、コードをほとんど変更する必要はありません。

于 2014-07-13T19:18:32.287 に答える
2

私は同様の質問に答え、ここに例を示しました：

AngularJS のカスタム URL を持つモーダル ウィンドウ

完全に機能する HTML と plunker へのリンクがあります。

于 2014-12-03T23:18:25.580 に答える