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并在.card div上使用ng-hide ， ng-show或ng-if ，现在是一个子元素，但也没有任何作用。

似乎ng-hide要么根本没有被评估，要么正在指令的作用域上定义request之前被评估。

Answer 1

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

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

ng-if，ng-show和ng-hide都设置了观察程序，因此问题不应该是在填充范围之前先对表达式求值。

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

Answer 2

尝试在ngCloak div上使用ngCloak 。 只要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块内，延迟10毫秒，如下所示：

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

编译指令后，这将触发摘要循环，从而导致对ng-hide进行重新评估。 延迟对于指令的编译来说足够长，但是对于用户来说却是不容易察觉的。