Question

我在directive's return语句中设置了控制器功能，如下所示：controller: elementCtrl。

在这个函数中，我有一个奇怪的（简化的）示例，其中设置了ct.ngIf = false;。

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

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

指令为Element类型，并在指令ng-if上应用。但问题是我不明白这是什么以及它是如何工作的，并且找不到任何关于该用法的文档示例。

而且，我有可能以这种方式使用其他Angular核心指令，例如ngShow = false吗？

Answer 1

您可以问我们的问题可以解释为：

在ngIf上为指令的控制器设置this会做什么特别的事情吗？

答案是：否。以下是证明：

＆＃13;

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;
          });
      }
    };
  });

＆＃13;

<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>

＆＃13;

你还没有提供一个完整的，最小的复制品，所以我必须拿出一个我自己的复制品。我认为你需要这样的东西才能让它做任何事情：

＆＃13;

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; });
        });
      }
    };
  });

＆＃13;

<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>

＆＃13;

需要一些额外的东西（最值得注意的是翻译和$scope.$apply）来演示一个有用的场景。即便如此， ngIf只不过是控制器实例上命名不佳的属性。没什么特别的。您可以根据需要重命名它，不会有任何改变。

如果你命名一个控制器属性＆＃34; ngIf＆＃34;那么就会发生 no Angular magic。

你不能问我们的问题是：为什么作者这样做了？你不得不问作者。

PS。没有冒犯，但我会带着作者的解释。即使从您发布的一小段代码中，也有相当多的危险信号：控制器内的自定义jQuery事件处理程序（在$document上，可能是$(document)（？）），缺少$apply次调用，以及名称高度混乱的变量。

Angular指令的控制器中的this.ngIf是做什么的？

1 个答案: