4

親スコープの変数に影響を与えて、ディレクティブ内からng-showを切り替えようとしています。ディレクティブは、ng-repeatディレクティブを含むカスタムディレクティブです。アイデアは、ng-repeatが終了したら、含まれているdivとその中の要素を非表示にしたいということです。

これが私の状況を示すPlunkrです：http：//beta.plnkr.co/edit/C42Z25？p = reviewまた 、同じ問題を使用するJSFiddleでの比較もありますが、これはng-repeatではないため、機能します：http ://jsfiddle.net/dyzPC/

したがって、いくつかの問題があります。ディレクティブ内ではscope.$parent.showMe = true、親スコープを変更するために使用する必要があります。単にそれを設定showMeするために使用することはできないようですscope.showMe = true。スコープを分離してみましたが、スコープなし、真のスコープですが、何も機能しないようです。

さらに、jqueryコールバック関数では、親スコープのshowMeをとしてリセットできないようですscope.$parent.showMe = false。これにより、コンテンツがある場合は含まれているdivを表示できず、コンテンツがない場合は非表示にできません。

ちなみに、最後の問題の1つは、の使用法です$last。plunkrの例では、$ lastを使用することは可能ですが、私の実際のコードでは、ng-repeatコレクションがHTTP応答インターセプターからいっぱいになっています。これにより、すべての要素が。になるため、$lastを使用できなくなるよう$last = trueです。ng-repeatが終了したことを検出する別の方法はありますか？

4

2 に答える 2

2

scope.$parent.showMe = false;ディレクティブでは、次のようにラップする必要がありますscope.$apply()。

scope.$parent.showMe = true; //this one works
element.hide().fadeIn('fast').delay(2000).fadeOut('slow', function(){
   scope.$apply(function(){
      scope.$parent.showMe = false;
   });
});

これは、Angular（jQuery関数）の外部でAngularプロパティの値を変更しているため、Angularが変更されたことを認識しないためscope.showMeです。

あなたのディレクティブはあなたと同じタグにあります。ngRepeatあなたのバインドを削除するので、分離スコープを使用することはできませんng-repeat="httpMessage in messages"。つまり、httpMessagesここでスコープを分離した場合は存在しません。

于 2013-05-14T22:10:05.017 に答える
0

非表示/表示ロジックとng-repeatをディレクティブに移動し、コントローラーにディレクティブの属性を介してメッセージのリストをディレクティブにフィードさせます。

app.directive("hideShow", function() {
return {
    restrict: 'E',
    template: 
    "<div ng:repeat='message in messages'>" +
    "  <em>{{message.message}}</em> " +
    "</div>",
    scope: {
        messages: "="
    },
    link: function(scope, element, attrs) {
        element.hide();
        scope.$watch("messages", function() {
            element.fadeIn('fast').delay(1000).fadeOut('slow');               
        });
    }
};
});

これが動作するフィドルです。

于 2013-05-15T03:45:49.497 に答える