I'm trying to use https://github.com/princejwesley/angular-circular-slider inside my website as a gender slider, it works when I initially load the page with it.
But when I go to another page in the website and then back to the profile, the slider errors out with the error in the title (as seen in the console). The pages use ng-route to load, I would think this is the culprit.
Here is the code:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#postsNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Posts</a>
</div>
<div class="collapse navbar-collapse" id="postsNavbar">
<ul class="nav navbar-nav">
<li><a href="#/login">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#/profile">Profile</a></li>
</ul>
</div>
</div>
</nav>
<div ng-view></div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="/app.js"></script>
<script src="/jquery.js"></script>
</body>
</html>
Here also is a Plnkr:
http://plnkr.co/edit/LkzBlHbELK8gHro4XStU
- in the menu, click profile to see the circular slider
- click login to go back
- go to the profile again
- Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'