angularjs：動的な変更スタイルが失敗しました

問題が発生しました.divはコントローラに設定された値によって制御され、値がtrueの場合は表示され、値がfalseの場合は非表示になります。値はscrollイベントによって制御されます。 htmlコードは以下の通りです：angularjs：動的な変更スタイルが失敗しました

<body ng-app="app" ng-controller="controller"> 
    <div class="round" ng-style="{'display':isRoundShow?'inline':'none'}"></div> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
    <h1>Hello Plunker!</h1> 
</body>

コントローラ部は以下の通りです：

angular.module('app', []) 

.controller('controller', function($scope) { 
    $scope.isRoundShow = false; 

    window.onscroll = function() { 
     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
     if(scrollTop > 50) { 
     $scope.isRoundShow = true; 
     }else{ 
     $scope.isRoundShow = false; 
     } 
    } 
})

CSSの定義は次のとおりです。今、私は疑問に思う

.round { 
    width : 40px; 
    height: 40px; 
    background-color: #FF0000; 
    border-radius: 50%; 
    position: fixed; 
    left: 10px; 
    top: 10px; 
}

なぜ私は、ラウンドをスクロールするときdivは決して表示されません、私はここにプランナーを建てました： https://plnkr.co/edit/u8RHyCMYRR5L8BwouOkg?p=preview

出典

2016-05-18 ahwyX100

これは、DOMイベントの一部として値を変更していて、角度のダイジェストループが起動していないためです。私は、あなたが「角度」のように、ここで達成しようとしているものを行うには良い方法を見つけることをお勧めしますが、今のところ、あなたは私のフォークあたりとして、$apply()を使用してダイジェストを強制することができます。

https://plnkr.co/edit/ihbiRtGebrIH81uqa6L3?p=preview

出典

2016-05-18 10:05:31

FYI - ここに同様の質問/回答です。http://stackoverflow.com/questions/20253322/angular-js-scroll-window –

あなたの親切な助けを借りて、本当にありがとうございます！ – ahwyX100

angularjs：動的な変更スタイルが失敗しました

答えて

関連する問題