Angularディレクティブのコントローラのthis.ngIfは何をしますか？

Question

コントローラの機能をdirective'sreturnに設定しました。controller: elementCtrlです。

ct.ngIf = false;が設定されている私は奇妙な（単純化された）例があります。

function elementCtrl($scope, $element) { 
    var ct = this; 

    $document.on('click', function() { 
     ct.ngIf = false; 
    }); 
} 

指令はElementタイプと指示ng-ifに適用されています。しかし問題は、私はこれが何で、どのように動作しているのか分からず、その使用法のドキュメントの例を見つけることができなかったことです。

さらに、このようにngShow = falseのような他の角度のコアディレクティブを使用することは可能ですか？あなたはのように言い換えることができにご依頼することができます

Answer 1

質問：

は特別な何かをディレクティブのコントローラーのためthisにngIfを設定していますか？

答えはなしです。

var $document = $(document); 
 

 
angular.module("app", []) 
 
    .directive("myElement", function() { 
 
    return { 
 
     template: "<strong>my directive content</strong>", 
 
     controller: function elementCtrl($scope, $element) { 
 
     var ct = this; 
 
      $document.on('click', function() { 
 
      ct.ngIf = false; 
 
      }); 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    MyElement = <my-element></my-element> 
 
</div>

あなたは完全な、最小限のREPROを提供していないので、私は私自身の1を思い付くする必要があります。ここに証拠です。私はあなたはそれがすべてで何かを作るために、このようなものが必要だと思う：

var $document = $(document); 
 

 
angular.module("app", []) 
 
    .directive("myElement", function() { 
 
    return { 
 
     template: "<strong>Content: <ng-transclude ng-if='vm.ngIf'></ng-transclude></strong>", 
 
     transclude: true, 
 
     controllerAs: "vm", 
 
     controller: function elementCtrl($scope, $element) { 
 
     var ct = this; 
 
     ct.ngIf = true; 
 
     $document.on("click", function() { 
 
      $scope.$apply(function() { ct.ngIf = false; }); 
 
     }); 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    MyElement = <my-element>Transcluded content.</my-element> 
 
    <br>Click in the document to set ngIf false... 
 
</div>

かなりの数の余分なものが多少便利なシナリオをデモするために（特にトランスクルーと$scope.$apply）必要でした。そしてさらにngIfはコントローラインスタンスのプロパティの名前が不十分です。特にない。あなたは好きなように名前を変更することができ、何も変わることはありません。

ありなしコントローラーのプロパティーに「ngIf」という名前を付けると、角張った魔法が発生します。

---

質問あなたが求めることはできませんたちです：は、著者がこれをなぜ行うのですか？あなたは作者に尋ねなければなりません。

PS。犯行はしませんが、著者の解説に塩の穀物を取ります。小さなコードスニペットからでも、かなりの数の赤いフラグがあります：コントローラー内のカスタムjQueryイベントハンドラー（すべて$(document)（？）で、おそらく$document）、$apply呼び出しがありません。混乱する名前。