1

我在指令中有一个隐藏组件，但是当页面加载时，隐藏元素会在动画期间出现，只有当组件的模型设置为可见时才会触发。

在此示例中，我将组件永久设置为ng-hide="true"，当页面加载时，它仍会显示半秒。在我的实际程序中，指令要复杂得多，所以我将模板放在它自己的文件中，如果我只是把它放在一个字符串中，问题就不会出现。

我尝试将style="display:none"添加到模板的内容中，但后来它不会对模型更改做出反应。

<html ng-app="myApp">
<head>
    <style>
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;

        transition: all linear 0.5s;
    }
    .overlay.ng-hide {
        opacity: 0;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-animate.min.js"></script>
    <script>
    angular.module("myApp", ['ngAnimate'])
        .directive("overlay", function() {
            return {
                replace: true,
                templateUrl: "overlay.html"
            };
        });
</script>
</head>
<body>
    <overlay></overlay>
</body>
</html>

覆盖.html：

<div class="overlay" ng-hide="true"></div>

Plunker：http ://plnkr.co/edit/tYLkGwPJtFPxH2ES6qIe?p=preview

4

2 回答 2

0

您可以添加一个链接函数，将display: none属性临时添加到覆盖元素，然后在ng-hide指令启动时通过观察ng-hide初始值然后删除display: none属性并注销观察者来删除。

像这样的东西： 分叉的柱塞

    .directive("overlay", function() {
        return {
            templateUrl: "overlay.html",
            link: function(scope, elem, attr) {
              elem.css('display', 'none');
              var dereg = scope.$watch(attr.ngHide, function(value) {
                elem.css('display', '');
                dereg();
              });
            }
        };
    });

请注意，我已删除该replace属性，它在 angular 3.0 及更高版本中已折旧。参考

于 2014-08-21T18:28:47.600 回答
0

您可以使用相反的方法ng-class。切换您的 CSS，以便仅在添加类时显示叠加层show：

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;

    transition: all linear 0.5s;
}
.overlay.show {
    opacity: 1;
}

然后只需ng-class在叠加层上使用指令，将false值更改为您想到的任何表达式。

<div class="overlay" ng-class="{show : false}"></div>

这是分叉的Plunker

于 2014-08-21T19:13:37.540 回答