Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs ngAnimate在重新加载路由时导致element.css(';display';,';block';)失败_Angularjs_Routes_Jquery Animate - Fatal编程技术网

Angularjs ngAnimate在重新加载路由时导致element.css(';display';,';block';)失败

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

此示例被注入到ngAnimate中。 首先,您需要像“/#/test/1”一样访问此测试页面,在修改$location.path('/test/2')3秒后,重新加载控制器,但无法显示浮动层(box.css('display','block')失败)。 如果不注入ngAnimate,则一切正常,可以显示浮动层。 我不知道发生了什么,这是一只虫子

HTML:

<!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');
                };
            }
        }
    })