7

そのフィドルは問題を示していますhttp://jsfiddle.net/LAqeX/2/

ページの一部をラップして非表示にするディレクティブを作成したいと考えています。そして、不要なバインディングを削除するために ng-if を使用したいと思います。しかし、いくつかの黒魔術が発生します。

これは私の好ましいディレクティブ コードです。

app.directive('withIf', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template: '<div>' +
        '<p ng-click="visible = !visible">{{title}}</p>' +
        '<div ng-if="visible" ng-transclude></div>'+
        '</div>',
        link: function(scope){
            scope.visible = false;
        }
    }
});

2 つのスコープを作成することになっています。

  1. title と visible の 2 つの変数を持つディレクティブ アイソレート スコープ
  2. 「通常の」スコープ ツリーからプロトタイプとして継承されるトランスクルード スコープ。

ただし、ng-if はトランスクルード スコープを現実から多少切り離し、トランスクルード スコープはコントローラから継承しません。フィドルを参照してください。問題が非常に明確に示されています。

そこで何が起こっているのか、それを解決する方法はありますか?

アップデート

スコープチェーンが壊れているように見える理由を見つけたようです。ng-if によって作成されたスコープは withIf ディレクティブの isolate ブランチに属します。そのため、コントローラーのスコープが存在することさえわかりません。しかし、問題は同じままです-そのような場合に ng-if を使用する方法。

4

2 に答える 2

1

このバグは Angular 1.3 で修正されたようです - https://github.com/angular/angular.js/pull/7499

于 2014-06-19T15:21:36.890 に答える
1

ng-if は子スコープを作成し、$parent親スコープから変数にアクセスするために使用します。しかし、あなたの場合、ng-ifの代わりにng-showまたはng-hideを使用することを検討します(子スコープを作成しません)

于 2014-03-03T07:45:02.627 に答える