Question

此问题发生在IE和Firefox中，而不是Chrome。

In this plunk我有一个包含div的模板的指令。 div显示为ng-show="show"，当show中的指令初始化时，变量link.pre设置为false。

我添加了一个警告，在变量show初始化为false后立即停止该过程，但无论如何都会显示模板。

如果ng-show设置为false，为什么会显示div？我需要模板在初始化时不显示，只有在我设置scope.show=true时才会显示。

模板：

<div ng-show="show">
  This shouldn't be shown
</div>

使用Javascript：

angular.module('app', []);

angular.module('app')
.directive('dir1', function() {


    var directive = {};

    directive.restrict = 'AE';

    directive.scope = true;

    directive.templateUrl = "template.html";

    directive.link = {};

    directive.link.pre = function(scope, element, attrs) {
      scope.show = false;
      alert(1);
    }

    directive.link.post = function(scope, element, attrs) {

    };

    return directive;

});

Answer 1

也许不是您正在寻找的解决方案，但您始终可以将ng-show替换为ng-if。然后在post块中将scope.show设置为true。没有必要使用false值初始化它，因为默认情况下它是假的。

Answer 2

似乎＆＃34;棱角分明＆＃34;在显示模板之前，我们还没有真正编译过您的模板。我尝试添加ng-cloak，但它似乎也没有用，所以我想你可以使用这个解决方法：

<div ng-show="show" class="ng-hide">
  This shouldn't be shown
</div>

这样，您可以强制默认隐藏指令。如果你添加：

scope.show = true;

在alert之后，它可以正常工作。

在接受此答案之前，请等待，看看是否有更好的答案。

Answer 3

我没有足够的回复评论但是要添加到ssougnez的答案，你需要在链接函数中编译元素。我有一个类似的问题，在我的指令范围内的任何函数调用都不起作用。试试这个：

directive.link.pre = function(scope, element, attrs) {
  scope.show = false;
  alert(1);
  $compile(element)(scope);
}

不要忘记为我的问题所在的$ compile注入依赖项。

指令模板在创建之前显示

3 个答案: