AngularJS:ng在不满足条件时显示元素可见

HTML:

JSFiddle：

请注意，activeWindow1从未设置为true，因此从技术上讲，我们永远不会看到黑框，对吗？尝试调整窗口大小，结果是$scope.apply（）；打电话看看会发生什么

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

---

有一个简单的解决办法，就是把ng秀带到一个新的部门，让当前的部门成为它的子部门。然而，我想理解为什么会发生这种情况，因为它看起来确实像一个角度错误。我怀疑我只是在用{{boxWidth}}inside style=“”做一些我不应该做的事情。如果是这样，那么正确的方法是什么？

问题是，在每个

$apply

之后，样式属性（来自两个框）正在重新计算（因为Angular必须从

{{boxWidth}}

插入值），这将自动删除

display:none

属性（负责隐藏元素）由

ng show

指令设置

要避免这种情况，请使用

ng style

指令，如下所示：

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();
    }
}

---

问题在于，在每次

$apply

之后，都会重新计算样式属性（来自两个框）（因为Angular必须从

{{boxWidth}}

中插入值），这将自动删除

显示：无

属性（负责隐藏元素）由

ng show

指令设置

要避免这种情况，请使用

ng style

指令，如下所示：

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();
    }
}

在某些情况下，似乎需要将“px”添加到值中，例如：$scope.boxWidth=300+“px”，尽管在我上面的简化示例中，没有“px”似乎可以正常工作。我还没有研究这是为什么，但希望这能有所帮助：）在某些情况下，您需要将“px”添加到值中，例如：$scope.boxWidth=300+“px”，尽管在我上面的简化示例中，没有“px”似乎可以正常工作。我还没有探究这是为什么，但希望能有所帮助：）

<div ng-show="activeWindow1" style="border:1px solid black; height:20px;" ng-style="{width: boxWidth}">