0

div の場合、次のng-classような式があります:ng-class="{error: msg.isError}"
と次のようng-showな式があります:ng-show="msg.text"
明らかなように、msg.textが空でない場合はdiv を表示し、msg.errorが true の場合はクラス 'error' を持ちます。
また、上映するときはいつでもフェードインしてほしいです。クラスが変更されていない場合はうまく機能しますがmsg.error、 true に設定し、同時に の値を設定するとmsg.text、アニメーションは発生しません。これが私の問題
のJSフィドルです。
これはhtmlです：

<div ng-app='app' ng-controller='cnt'>
<button ng-click="showText2()">This works</button>
<button ng-click="showText()">This doesn't work</button>
<button ng-click="clear()">Clear</button>
  <div ng-show="msg.text" ng-class="{error: msg.isError}" class="fadein fadeout">{{ msg.text }}</div>
</div>

これはjsコードです：

app = angular.module('app',['ngAnimate']);
app.controller('cnt', function($scope){
    $scope.showMsg = false;
    $scope.msg = {
        isError: false,
        text: ""
    };
    $scope.clear = function(){
        $scope.msg.isError = false;
        $scope.msg.text = "";
    }        
    $scope.showText = function(){ // This doesn't work
        $scope.msg.isError = true;
        $scope.msg.text = "text to fade in";
    }
    $scope.showText2 = function(){ // This works
        $scope.msg.text = "text to fade in";
    }
});
4

2 に答える 2

1

$scope.apply()同時だから。

が空でない場合$scope.msg.textは ng-show を適用すればOKです。が変更された場合$scope.msg.isError、ng-class は同時にクラスを更新し、アニメーションは発生しません。

タイマーを追加できます。$timeout 遅延 1 ミリ秒を使用します。例: JS フィドル

app = angular.module('app',['ngAnimate']);
app.controller('cnt', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.showMsg = false;
    $scope.msg = {
        isError: false,
        text: ""
    };
    $scope.clear = function(){
        $scope.msg.isError = false;
        $scope.msg.text = "";
    }        
    $scope.showText = function(){ // This doesn't work        
        $scope.msg.text = "text to fade in";

        // add timer, it's work now
        $timeout(function() {            
            $scope.msg.isError = true;
        }, 1);
    }
    $scope.showText2 = function(){ // This works
        $scope.msg.text = "text to fade in";
    }

}]);
于 2014-08-11T17:37:06.937 に答える