Angular ngShow 没有删除标签样式

Question

这是我的js：

(function () {
    angular.module("profile.view", [])
            .controller("ViewController", ["$scope", function (scope) {
                scope.profile = {{ profile_json|raw }};
            }]);

    angular.module("profileApp", ["profile.view"]);

    angular.bootstrap(document, ["profileApp"]);
})();

和我的 html:

<html>
<body>
<div class="loading" ng-if="false">Loading ....</div>
    <div ng-controller="ViewController" style="display: none" ng-show="true">
            some text
    </div>
</body>
</html>

为什么 angular 在加载时不删除 "display:none"？

Answer 1

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

所以它不会编辑 display: none 因为它不应该编辑它。

此外，我建议您阅读指南，例如 this。如果您想要加载消息，请查看 this 问题。

Answer 2

当我们制作 ng-show=false 时，angular 添加（外部）css，如 display: none !important。如果我们制作 ng-show=true 它会删除 css.

无论我们做出什么改变（ng-show 的值），它总是保持 display: none 在 html。所以它总是隐藏起来。因为 inline 的优先级高于 internal 和 external css。因此，为了显示元素，我们必须从元素中删除内联 css。

Angular ngShow 没有删除标签样式

Angular ngShow is not removing tag style

javascript

angularjs

ng-show