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，{{1 ng-show div上的{}，或ng-if，它现在是一个子元素，但也没有效果。

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

Answer 1

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

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

ng-if，ng-show和ng-hide所有设置的观察者，所以问题不应该是在填充范围之前评估表达式。

仅出于测试目的，尝试在指令控制器中的示波器上设置布尔值，然后执行隐藏或反对。

Answer 2

尝试在包装器上使用ngCloak - div。只要角度仍在评估事物，它应该隐藏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"＆＃39 ; s根元素和以前一样，但是在我的控制器中，而不是立即设置$scope.hide = $scope.request.hide，我决定在$timeout块内移动它，延迟为10ms，如下所示：

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

这会在编译指令后触发摘要周期，从而导致重新评估ng-hide。延迟足够长，指令可以编译，但又足够短，以至于用户无法察觉。

ng-show / ng-hide / ng-if不能处理Angular指令

4 个答案: