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

問題は、（両方のボックスからの）スタイル属性がそれぞれの後に再計算されていることです$apply（Angularはから値を補間する必要があるため）。これにより、ディレクティブによって設定されたプロパティ（要素を非表示にする責任が{{boxWidth}}あります）が自動的に削除されます。display: noneng-show

これを回避するには、次のng-styleようなディレクティブを使用します。

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