0

对于 div，我有这样的ng-class表达式：ng-class="{error: msg.isError}"
和这样的ng-show表达式：ng-show="msg.text"
很明显，我希望 divmsg.text不为空时显示，并且我希望它在msg.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 是应用它，没关系。如果$scope.msg.isError是变化，ng-class会同时更新class，动画不会出现；

您可以添加计时器，使用 $timeout 延迟 1 毫秒，示例：JS fiddle

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 回答
1

来不及回答，但还是

什么时候ng-show是真正的角度将向ngHide元素添加类。因此，如果$scope.msg.isError为真，error则同时添加该类，ngHide因此动画将不起作用。

这是简单的解决方法

<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" class="fadein fadeout">
        <span ng-class="{error: msg.isError}">{{ msg.text }}</span>
      </div>
    </div>

这是JS 小提琴

这只是一种解决方法，而不是真正的解决方案，因为这可能是角度代码本身的问题。

于 2017-05-18T08:24:29.610 回答