检查后执行指令

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如果表达式为false，则不会呈现标记的内容。

然后在您的控制器中，当您希望标签可见时，只需将表达式设置为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>

表达式为false时：

<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浏览器不在布局中显示元素。元素仍然被渲染＆＃34;虽然，或执行可能是一个更好的词，这是这里的主要区别。这在加载页面时会产生实际影响，特别是如果ng-if元素中的内容例如从服务器加载数据。这也意味着如果你的指令修改了DOM并添加了敏感信息，那么你应该使用ng-if ！

Answer 2

我可能会选择ng-if：

<start-login ng-if="checkLogin"> ... </start-login>

  

ngIf指令基于{expression}删除或重新创建DOM树的一部分。如果分配给ngIf的表达式求值为false值，则从DOM中删除该元素，否则将元素的克隆重新插入DOM中。

https://docs.angularjs.org/api/ng/directive/ngIf

Answer 3

当然你可以使用ngIf或ngShow / ngHide指令，但还有另一种方法可以做到这一点。你可以使用angular.value（...）。当你定义该模块的全局值时，将它注入你的指令，然后在创建指令之前，你可以检查你的价值，然后做任何你想做的事。