ng-show / ng-hide / ng-if 不适用于 Angular 指令

Question

我正在构建一个采用卡片形式的指令。当我加载卡片模板时，如果用户之前隐藏了卡片，我想确保卡片是隐藏的。我可以通过request.hide 属性跟踪这个。

这是我的指令（准系统）：

app.directive('request', ['$http', '$timeout', function($http, $timeout) {
    return {
        replace: true,
        templateUrl: '/assets/request.html',
        transclude: false,
        scope: {
            request: '='
        },
        controller: ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
            // Cool stuff goes in here
        }]
    };
}]);

这是我的模板：

<div>
    <div ng-hide"request.hide" class="card">
        <!-- Cool stuff goes in here -->
    </div>
</div>

当页面加载时，每个request 都有一个hide 属性。理论上，当我调用我的指令时，如果hide === true 应该隐藏它。不幸的是，情况似乎并非如此。无论我尝试什么，我都无法在初始化时隐藏我的指令。我尝试在根元素上使用ng-hide="request.hide"、ng-show="!request.hide" 和ng-if="!request.hide"，但没有任何效果。

我想知道这些指令是否不适用于自定义指令的根元素，因此我尝试将我的指令包装在一个额外的 div 中并使用 ng-hide、ng-show 或 ng-if on .card div，现在是子元素，但也没有效果。

似乎ng-hide 根本没有被评估，或者在request 被定义在指令的范围之前被评估。

Answer 1

您提供的模板标记中有一个小错字，在 ng-hide 后缺少一个 = 符号。但我猜这只是你写问题时的一个错字。

否则，指令代码看起来很好，它应该可以工作。您应该仔细检查您将指令绑定到的“请求”对象，并确保 hide 属性实际上是一个布尔值，而不是一个字符串。

ng-if、ng-show 和 ng-hide 都设置了观察者，因此问题不应该是在填充范围之前对表达式进行评估。

仅出于测试目的，请尝试在指令控制器中的作用域上设置布尔值，然后进行隐藏或反之。

Answer 2

尝试在包装器上使用ngCloak-div。只要 angular 仍在评估事物，它就应该隐藏 div 及其子项。

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

编辑： 实际上，没有。 ngCloak 不像我记得的那样工作。它隐藏了元素及其所有子元素，但前提是它没有在编译阶段遇到——这对我来说还为时过早。不过，您可以编写自己的伪装指令。

这里是ngCloak's 来源：

var ngCloakDirective = ngDirective({
  compile: function(element, attr) {
    attr.$set('ngCloak', undefined);
    element.removeClass('ng-cloak');
  }
});

您需要在链接前/链接后阶段模仿其行为。

Answer 3

ng-show 可能不可靠。

<div>
    <div ng-show"!!request.hide" class="card">
        <!-- Cool stuff goes in here -->
    </div>
</div>

Answer 4

我终于想出了解决问题的方法，但我仍然想知道导致问题的原因以及解决问题的最佳方法。

我有一个理论认为，当我的指令被编译时，ng-show/ng-hide/ng-if 没有被评估，所以我决定像以前一样在我的指令的根元素上使用ng-hide="hide"，但在我的控制器中，而不是立即设置$scope.hide = $scope.request.hide，我决定将其移动到$timeout 块内，延迟10ms，如下所示：

$timeout(function() {
    $scope.hide = $scope.request.hide;
}, 10)

这会在编译指令后触发摘要循环，从而重新评估 ng-hide。延迟对于指令编译来说足够长，但对于用户来说也足够短。