CODEWITHSUNDEEP
angularjsjquery-pluginsngrouteanimsition
curtybear
curtybear

Reputation: 1538

jQuery Plugins not working with Angular Router (Animsition)

I'm trying to get the Animsition plugin working in an Angular project. The loader is stuck and the view doesn't load.

The jQuery plugin is in a directive, and works as separate HTML files without Angular routing. But I want to get it to work WITH Angular Router.

// In the directive, defaults were: 

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

(and it worked fine without router + separate full html files with head/body/script tags to sources. But as separate views, I changed each view to have parent main elements, assuming they acted as parent body elements. But still didn't work.

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 file

<!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>

Partial 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>

Partial 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>

Upvotes: 3

Views: 1154

Answers (1)

beginnerprogrammer
beginnerprogrammer

Reputation: 508

I got this problem also, and i make it work by using this code, you can tried it

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

Upvotes: 0

Related Questions