jQuery插件不支持角度路由器（動畫）

我正在試圖獲得Animsition插件在Angular項目中工作。 加載程序卡住，視圖無法加載。jQuery插件不支持角度路由器（動畫）

該jQuery插件是在一個指令，並作爲單獨的HTML文件沒有Angular路由。但我想讓它與Angular Router一起工作。

//在指令中，默認爲：

loadingParentElement : 'body', 
overlayParentElement : 'body',

（它沒有路由器+頭/體/腳本標籤，從而來源獨立的全HTML文件工作得很好，但作爲獨立的意見，我改變了每一個。鑑於有家長主要元素，假設他們擔任母體元素，但仍然沒有奏效。

app.js

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

app.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', { 
    templateUrl: 'partials/home.html', 
    controller: 'AppCtrl', 
    }) 
    .when('/work', { 
    templateUrl: 'partials/work.html', 
    controller: 'AppCtrl', 
    }) 
    .otherwise({ 
    redirectTo: '/' 
    }); 
}); 

// the directive 
app.directive('ngAnimsition', [function() { 
    return { 
    restrict: 'A', 
    scope: { 
     'model': '=' 
    }, 
    link: function(scope, elem, attrs) { 
     var $animsition = $(elem); 
     $animsition.animsition({ 
     inClass: 'fade-in', 
     outClass: 'fade-out', 
     inDuration: 1500, 
     outDuration: 800, 
     linkElement: '.animsition-link', 
     loading: true, 
     loadingParentElement: 'main', //animsition wrapper element 
     loadingClass: 'animsition-loading', 
     loadingInner: '', // e.g '<img src="loading.svg" />' 
     timeout: false, 
     timeoutCountdown: 5000, 
     onLoadEvent: true, 
     browser: [ 'animation-duration', '-webkit-animation-duration'], 
     overlay : false, 
     overlayClass : 'animsition-overlay-slide', 
     overlayParentElement : 'main', 
     transition: function(url) { 
      window.location.href = url; 
     } 
     }); 
    } 
    } 
}]);

index.html文件

<!DOCTYPE html> 
<html class="no-js" ng-app="MyApp"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>Getting Animsition jQuery + Angular Router</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!--CSS--> 
     <link rel="stylesheet" href="css/normalize.min.css"> 
     <link rel="stylesheet" href="js/animsition/animsition.min.css"> 
     <link rel="stylesheet" href="css/main.css"> 
    </head> 
    <body ng-controller="AppCtrl"> 

     <!-- ng-router --> 
     <div ng-view></div> 

     <!-- tried below, but only does animsition on first load, not changing between views --> 
     <!-- <div ng-animsition class="animsition"> 
      <!-- <div ng-view></div> 
     <!-- </div> 

     <!-- jquery --> 
     <script src="js/jquery/jquery.min.js"></script> 
     <script src="js/animsition/jquery.animsition.min.js"></script> 

     <!-- Angular --> 
     <script src="js/angular/angular.min.js"></script> 
     <script src="js/angular/angular-router.min.js"></script> 
     <script src="js/app.js"></script> 

    </body> 
</html>

部分home.html的

<main> 
    <div ng-animsition class="row container animsition"> 
     <nav> 
      <a ng-href="#/" class="active animsition-link">Home</a> 
      <a ng-href="#/work" class="animsition-link">Work</a> 
     </nav> 
     <div> 
      <h1>Home</h1> 
     </div> 
    </div> 
</main>

部分work.html

<main> 
    <div ng-animsition class="row container animsition"> 
     <nav> 
      <a ng-href="#/" class="animsition-link">Home</a> 
      <a ng-href="#/work" class="active animsition-link">Work</a> 
     </nav> 
     <div> 
      <h1>Work</h1> 
     </div> 
    </div> 
</main>

來源

2016-04-25 Craig O. Curtis

同樣的問題在這裏 – cesarluis

它解決了嗎？你使用它下面的任何管理模板？ –

我得到了這個問題也和我使其通過使用此代碼工作，你可以嘗試它

transition: function(url){ 
     if(url){ 
      window.location.href = url; 
     } 
     else{ 
      location.reload(); 
     } 
    }

來源

2017-07-11 05:03:16 beginnerprogrammer

jQuery插件不支持角度路由器（動畫）

回答

相關問題