jQuery插件不使用Angular Router（Animsition）

Question

我正在嘗試讓Animsition插件在Angular項目中運行。 加載程序卡住，視圖無法加載。

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

//在指令中，默認值為：

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

（並且它沒有路由器+單獨的完整html文件與head / body / script標簽到源。但是作為單獨的視圖，我將每個視圖更改為具有父主要元素，假設它們充當父體元素。但是仍然沒有工作。

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>

Answer 1

我也遇到了這個問題，我使用這個代碼使它工作，你可以試試

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

jQuery插件不使用Angular Router（Animsition）

問題描述

1 個解決方案

解決方案1
0 2017-07-11 05:03:16

jQuery插件不使用Angular Router（Animsition）

問題描述

1 個解決方案

解決方案1 0 2017-07-11 05:03:16

解決方案1
0 2017-07-11 05:03:16