Angularjs ngAnimate在重新加载路由时导致element.css(';display';,';block';)失败
此示例被注入到ngAnimate中。 首先,您需要像“/#/test/1”一样访问此测试页面,在修改$location.path('/test/2')3秒后,重新加载控制器,但无法显示浮动层(box.css('display','block')失败)。 如果不注入ngAnimate,则一切正常,可以显示浮动层。 我不知道发生了什么,这是一只虫子 HTML:Angularjs ngAnimate在重新加载路由时导致element.css(';display';,';block';)失败,angularjs,routes,jquery-animate,Angularjs,Routes,Jquery Animate,此示例被注入到ngAnimate中。 首先,您需要像“/#/test/1”一样访问此测试页面,在修改$location.path('/test/2')3秒后,重新加载控制器,但无法显示浮动层(box.css('display','block')失败)。 如果不注入ngAnimate,则一切正常,可以显示浮动层。 我不知道发生了什么,这是一只虫子 HTML: <!doctype html> <html ng-app="app"> <head> <m
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.popup {
position: fixed; width: 100%; height: 100%; background-color: rgba(36,36,36,.96); top: 0; left: 0; z-index: 1;
}
.popup .context .hd {
font-size: 32px; color:#FFF; text-align: center;
}
.popup .close {
font-size: 32px; color:#999; text-align: center;
}
</style>
</head>
<body>
<div class="wrapper" ng-view></div>
<script src="angular_1.4.1.min.js" type="text/javascript"></script>
<script src="angular-route.min.js" type="text/javascript"></script>
<script src="angular-animate.min.js" type="text/javascript"></script>
</body>
</html>
route : <span style="color:red; font-size: 32px;">{{id}}</span>
<input type="button" pop-window-open ng-click="openPopWindow()" style="width:200px; height: 50px;" value="open window">
<section class="popup" id="popWindow" style="display: none;">
<div class="context">
<div class="hd">pop window</div>
<div class="bd"></div>
</div>
<div class="close" pop-window-close ng-click="closePopWindow()">close</div>
</section>
angular.module('app', ['ngRoute', 'ngAnimate', 'youyuApp.controllers', 'youyuApp.directives'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/test/:id', {
templateUrl : 'demo.html',
controller : 'ctrl1'
});
}]);
angular.module('youyuApp.controllers', [])
.controller('ctrl1', ['$scope', '$location', '$timeout', '$routeParams',
function($scope, $location, $timeout, $routeParams) {
$scope.id = $routeParams.id;
$timeout(function() {
$location.path('/test/2');
}, 3000);
}]);
angular.module('youyuApp.directives', [])
.directive('popWindowOpen', function() {
return {
restrict: 'EA',
link : function(scope, element, attrs) {
var box = angular.element(document.getElementById('popWindow'));
scope.openPopWindow = function() {
box.css('display', 'block');
};
}
}
})
.directive('popWindowClose', function() {
return {
restrict: 'EA',
scope : true,
link : function(scope, element, attrs) {
var box = angular.element(document.getElementById('popWindow'));
scope.closePopWindow = function() {
box.css('display', 'none');
};
}
}
})