angularjs - 检查后执行指令

Question

我有 <start-login></start-login>和指令

app.directive('startLogin', function(){
  return {
    restrict: 'E',
    templateUrl: 'startlogin.html',
    controller: 'LoginController'
  }
});

我只需要在检查后执行指令，如下所示:

var checkLogin = false //variable
if(checkLogin){
  //do something and DON'T EXECUTE DIRECTIVE
}else{
  //EXECUTE DIRECTIVE

我该怎么做？我的项目中也有 jQuery..

Answer 1

您可以使用 ng-if directive ，就像这样:

<start-login ng-if="expression">

ng-if 如果表达式为假，则不会渲染标签的内容。

然后，当您希望标签可见时，您只需在 Controller 中将表达式设置为 true。在您的示例中，您当然可以使用变量 checkLogin 而不是表达式。

---

使用 ng-if 和 ng-show 也有很大的不同。用户可能不会体验到它，因为实际的区别在于 ng-show 隐藏 内容，而 ng-if 根本不呈现它。如果我们检查两者之间的 DOM，您会发现它们在不同状态下看起来类似于下面的代码:

当表达式为真时:

<start-login ng-show="expression"></start-login>
<start-login ng-if="expression"></start-login>

当表达式为假时:

<start-login ng-show="expression" class="ng-hide"></start-login>
<!-- ngIf: start-login -->

这是最大的不同。 ng-if 完全删除元素并且只在 DOM 中添加注释。如果您使用 ng-show(或 ng-hide)，则 angular 会在元素上附加一个类。该类被声明为

.ng-hide { display: none; }

仅指示 Web 浏览器不显示布局中的元素。该元素仍然是“渲染”的，或者 executed 可能是一个更好的词，这是这里的主要区别。这在加载页面时会产生真正的影响，特别是当 ng-if 元素中的内容从服务器加载数据时。这也意味着如果你的指令修改了 DOM 并添加了敏感信息，那么 你应该使用 ng-if!