一度しか機能しない 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 番目のディレクティブは、ページの更新後にのみ機能します。スコープに関係していると思いますが、一方が機能し、もう一方が失敗する理由がわかりません。
どんな助けでも大歓迎です。