JQuery的动画和AngularJS

HTML代码：

<!DOCTYPE html> 
<html ng-app="test"> 

    <head lang="en"> 
    <meta charset="utf-8"> 
    <title>Wtf is that</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="testCtrl"> 

    {{test}} 
    <br /> 
    <button ng-click="set()">set</button> 
    <button ng-click="setTimeout()">setTimeout</button> 

    </body> 

</html>

AngularJS代码：

var app = angular.module('test', []); 

app.controller('testCtrl', function($scope, $timeout) { 
    $scope.test = false; 
    $scope.set = function() { 
     $timeout(function() { 
       $scope.test = !$scope.test; 
     }, 1000); 
    }; 
    $scope.setTimeout = function() { 
     $('body').slideUp(1000, function() { 
      $('body').slideDown(1000, function() { 
       $scope.test = !$scope.test; 
     console.log($scope.test); 
       console.log('done'); 
      }); 
     }); 
    }; 
});

为什么$scope变量不发生变化，当我在动画结束后改变？

在超时：

$scope.set = function() { 
    $timeout(function() { 
      $scope.test = !$scope.test; 
    }, 1000); 
};

所有工作确定。

来源

2017-09-02 polak polkovski

角与角JS是不同的，请标注正确 –

var app = angular.module('test', []); 
 

 
app.controller('testCtrl', function($scope, $timeout) { 
 
    $scope.test = false; 
 
    $scope.set = function() { 
 
     $timeout(function() { 
 
      $scope.$apply(function() { 
 
       console.log("update time clicked"); 
 
       $scope.test = !$scope.test; 
 
      }); 
 
     }, 1000); 
 
    }; 
 
    $scope.setTimeout = function() { 
 
     $('body').slideUp(1000, function() { 
 
      $('body').slideDown(1000, function() { 
 
       $scope.$apply(function() { 
 
        $scope.test = !$scope.test; 
 
       }); 
 
      }); 
 
     }); 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="test"> 
 

 
<head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Wtf is that</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="testCtrl"> 
 

 
    {{test}} 
 
    <br /> 
 
    <button ng-click="set()">set</button> 
 
    <button ng-click="setTimeout()">setTimeout</button> 
 

 
</body> 
 

 
</html>

你需要使用$范围$适用，因为当您更改AngularJS模型之外（从外部JavaScript） - 你需要使用$范围$适用（）来AngularJS知道模型已经修改。

来源

2017-09-02 18:11:06

但是{{测试}}仍然显示错误 –

答案更新！ – 2017-09-02 18:20:52

@MaximShoustin兄弟！你能告诉我我复制了谁吗？ – 2017-09-02 18:22:15

因为jQuery动画在Angular范围之外运行。你需要指定角度，你的范围已与改变：

$scope.$apply();

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

来源

2017-09-02 18:15:32

如果你使用jQuery，角不知道DOM操作。要触发消化周期你可以用$scope.test = !$scope.test;与$timeout，使其工作：

$('body').slideUp(1000, function() { 
     $('body').slideDown(1000, function() { 
      $timeout(function(){ 
      $scope.test = !$scope.test; 
      }); 
     }); 
    });

Fixed Demo

来源

2017-09-02 18:16:36

JQuery的动画和AngularJS

回答

相关问题