Question

HTML：

<div ng-app ng-controller="AppController">
    boxWidth: {{boxWidth}}
    <div ng-show="activeWindow1" style="border:1px solid black; width: {{boxWidth}}px; height:20px;">
    </div>
    <div ng-show="activeWindow2" style="border:1px solid red; width: {{boxWidth}}px; height:20px;">
    </div>
</div>

JS：

function AppController($scope) {
    $scope.getWidth = function() {
        return $(window).width();
    };
    $scope.$watch($scope.getWidth, function(newValue, oldValue) {
        $scope.boxWidth = newValue / 10;
        $scope.activeWindow2 = true;
    });
    window.onresize = function(){
        $scope.$apply();
    }
}

JSFiddle：http://jsfiddle.net/fQgXQ/20/

请注意，activeWindow1永远不会设置为true，所以从技术上讲，我们永远不应该看到黑盒子，对吗？尝试调整窗口大小，产生$ scope.apply（）;打电话，看看会发生什么。

结果：两个框都可见（最近的Chrome浏览器）。

有一个简单的解决方法，即将ng-show带入一个新的div，使当前的一个成为孩子。但是，我想了解为什么会发生这种情况，因为它看起来像是一个Angular bug。我怀疑我只是做了一些我不应该使用{{boxWidth}}里面的样式=“”。如果是这样，那么什么是正确的方式？

Answer 1

问题是每个$apply之后都会重新计算样式属性（来自两个框）（因为Angular必须插入来自{{boxWidth}}的值），这将自动删除{{1}由display: none指令设置的属性（负责隐藏元素）。

要避免这种情况，请使用ng-show指令，如下所示：

ng-style

AngularJS：ng-show元素在条件不满足时可见

1 个答案: