23

次のように使用するディレクティブがあります。

<dir model="data"></dir>

ディレクティブには、分離されたスコープがあります。

scope :{
  model:'='
}

ng-show今、次のように、ページの $scope の別の属性を使用して、そのディレクティブで使用しようとしています。

<dir ng-show="show" model="data"></dir>

showしかし、ディレクティブが独自のスコープで属性を見つけようとしているため、機能していません。

コンテナがそれを非表示にすることを選択する可能性があるという事実をディレクティブに知らせたくありません。

私が見つけた回避策は、ディレクティブを a でラップしてその要素に<div>適用ng-showすることですが、これにより強制的に使用する余分な要素が好きではありません。

<div ng-show="show" >
  <dir model="data"></dir>    
</div>

これを行うより良い方法はありますか？

このプランカーを参照してください: http://plnkr.co/edit/Q3MkWfl5mHssUeh3zXiR?p=preview

4

4 に答える 4

12

更新:この回答は、1.2 より前の Angular リリースに適用されます。Angular 1.2 については、@ lex82 の回答を参照してください。

dirディレクティブは分離スコープを作成するため、同じ要素 (dirこの場合) で定義されたすべてのディレクティブはその分離スコープを使用します。これが、親スコープではなく、分離スコープでng-showプロパティを検索する理由です。show

あなたのdirディレクティブが真にスタンドアロン/自己完結型/再利用可能なコンポーネントであり、したがって分離スコープを使用する必要がある場合、$parentそのようなディレクティブは通常、同じ要素（または、まさにこの種の問題が発生します）。

ディレクティブが分離スコープを必要としない場合、問題は解決します。

于 2013-05-25T14:16:22.670 に答える
11

Angular 1.2 以降への移行を検討できます。分離スコープは、スコープ プロパティを持つディレクティブにのみ公開されるようになりました。これは、 ng-show がディレクティブの影響を受けなくなり、最初にやろうとしたのとまったく同じように書くことができることを意味します:

<dir ng-show="show" model="data"></dir>

@Angular-Developers: 皆さん、よく頑張りました!

于 2013-11-17T18:17:17.697 に答える
1

$parent次のように親スコープに使用するだけです。

<dir ng-show="$parent.show" model="data"></dir>

免責事項

これがあなたの質問に対する正確な答えだと思いますが、美的観点からは完全ではないことを認めます. ただし、ラッピング<div>もあまり良くありません。分離スコープに渡された他のパラメーターから、ディレクティブが実際に分離スコープを持っていることがわかるので、それを正当化できると思います。一方、私は定期的に $parent を最初に忘れてしまい、なぜそれが機能しないのか疑問に思うことを認めなければなりません。

追加の属性を追加して、内部is-visible="expression"に挿入する方が確かに明確です。ng-showしかし、あなたは質問で、この解決策を回避しようとしたと述べました.

更新: Angular 1.2 以降では機能しません。

于 2013-11-12T22:10:17.080 に答える