1

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 中，使当前的 div 成为它的孩子。但是，我想了解为什么会发生这种情况，因为它看起来确实像是一个 Angular 错误。我怀疑我只是在使用 style="" 中的 {{boxWidth}} 做一些我不应该做的事情。如果是这样，什么是正确的方法？

4

1 回答 1

1

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

为避免这种情况，请使用该ng-style指令，如下所示：

<div ng-show="activeWindow1" style="border:1px solid black; height:20px;" ng-style="{width: boxWidth}">
于 2013-02-15T11:04:51.463 回答