9

angularjs.org の開発者ガイドのディレクティブ セクションを読んで知識を更新し、いくつかの洞察を得て、サンプルの 1 つを実行しようとしましたが、ディレクティブ ng-hide がカスタム ディレクティブで機能しません。

ここで jsfiddle: http://jsfiddle.net/D3Nsk/ :

<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
  Does Not Work Here!!!
</my-dialog>
<div ng-hide="dialogIsHidden">
       It works Here.
</div>

なぜこれが起こっているのかについて何か考えはありますか？

解決

タグの変数dialogIsHiddenは、コントローラー内の変数ではなく、ディレクティブ内のスコープ変数への参照を既に作成しているようです。ディレクティブに独自の独立したスコープがある場合、これを機能させるには、コントローラーの変数 dialogIsHidden をディレクティブに参照渡しする必要があります。

ここに jsfiddle があります: http://jsfiddle.net/h7xvA/

変更:

 <my-dialog 
     ng-hide="dialogIsHidden" 
     on-close="hideDialog()" dialog-is-hidden='dialogIsHidden'>

と：

  scope: {
    'close': '&onClose',
    'dialogIsHidden': '='
  },
4

2 に答える 2

9

オブジェクトをスコープに割り当てるときに、ディレクティブ内に分離されたスコープを作成しています。これが、 $scope.dialogIsHidden がディレクティブに渡されず、要素が非表示にならない理由です。

$parent を使用したフィドルに対する Kain の提案された調整は、これを示しています。

于 2013-11-08T03:12:00.910 に答える
8

あなたは変更することができます

 <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">

に

 <my-dialog ng-hide="$parent.dialogIsHidden" on-close="hideDialog()">
于 2013-11-08T03:34:19.263 に答える