angularjs - jQuery Plugins not working with Angular Router (Animsition) -
i'm trying animsition plugin working in angular project. the loader stuck , view doesn't load.
the jquery plugin in directive, , works separate html files without angular routing. want work angular router.
// in directive, defaults were:
loadingparentelement : 'body', overlayparentelement : 'body', (and worked fine without router + separate full html files head/body/script tags sources. separate views, changed each view have parent main elements, assuming acted parent body elements. 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: '/' }); }); // 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, 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>
i got problem also, , make work using code, can tried it
transition: function(url){ if(url){ window.location.href = url; } else{ location.reload(); } } 
Comments
Post a Comment