检查后执行指令

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 将不会呈现标签的内容。

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

使用ng-if和ng-show也有很大的区别。用户可能不会体验到它，因为实际的区别是 ng-show hides 内容而 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 会向元素附加一个 class。 class 声明为

.ng-hide { display: none; }

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

Answer 2

我可能会选择 ng-if：

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

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

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

Answer 3

当然你可以使用 ngIf 或 ngShow/ngHide 指令，但是还有另一种方法 that.You 可以使用 angular.value(...)。当你定义一个全局值时那个模块，把它注入你的指令，然后在创建指令之前，你可以检查你的值，然后做任何你想做的事。

检查后执行指令

Execute directive after a check

angularjs

angularjs-directive