1

一度しか機能しない AngularJS ディレクティブがいくつかあります。ビューが変更され、それらが機能しなくなった場合、ページの更新は必要ありませんが、ページの変更には ng-include を使用した単純なビュー読み込みシステムを使用します (メイン ルートではなくサブページ)。

このようなマークアップがあります。

<div class="row" ng-controller="mainCtrl">
    <ul class="sidebar span3" sub-nav>
        <li><a ng-click="changePage('users')">Users</a></li>
        <li><a ng-click="changePage('posts')">Posts</a></li>
    </ul>
    <div class="span9" view-partial ng-include="route[active]"></div>
</div>

「sub-nav」ディレクティブには、「アクティブな」スコープ変数を更新するメソッドがあります。次に、「アクティブな」変数への変更をリッスンし、値が異なる場合に「pageChange」イベントを発行するディレクティブがあります。(それらは複数に適用されるため、コントローラーとは別のものです)。一度にこのコードを実行するコントローラーは 1 つだけで、完全に機能しているようです。

ng-include 内では、データをループするために ng-repeat を使用しています。このループが生成するテーブルには、このようなディレクティブが適用された削除ボタンがあります。

angular.module("myModule")

    .directive("deleteBtn", function(delConf) {
        require: "?ngModel",
        link: function(scope, elm, attr, ngModel) {
            elm.bind("click", function(e) {
                // here i open a modal window and pass some data to it
                // just as a delete confirmation the logic for it is tucked 
                // away in delConf
            }
        }
    })

    .directive("deleteConfBtn", function(delConf) {
        require: "?ngModel",
        link: function(scope, elm, attr, ngModel) {
            elm.bind("click", function(e) {
                // here i make the api request to delete the item and remove it
                // from the scope
            }
        }            
    });

最初のディレクティブは、テーブルの削除ボタンに適用されます (ビューが変更されても、これは常に機能します)。2 番目のディレクティブは、ブートストラップ モーダル ウィンドウのボタンに適用されます。

2 番目のディレクティブは、ページの更新後にのみ機能します。スコープに関係していると思いますが、一方が機能し、もう一方が失敗する理由がわかりません。

どんな助けでも大歓迎です。

4

0 に答える 0