I am trying to display a bootstrap toggle checkbox inside <ng-view></ng-view>. But a normal HTML checkbox is displayed instead of a bootstrap toggle. However, the same checkbox is getting displayed as a bootstrap toggle outside of the view (home page). Please find below the code
Home.html
<html ng-app='cgpaApp'>
<head>
<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/styles/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/styles/error.css" />
<link rel="stylesheet" type="text/css" href="/styles/bootstrap-toggle.min.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CGPA Calculator</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="#/Home">Home</a></li>
<li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
</ul>
</div>
</nav>
</header>
Working Checkbox toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No">
<main>
<ng-view></ng-view>
</main>
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-toggle.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-messages.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/cgpaController.js"></script>
<script src="app/controllers/headerController.js"></script>
<script src="scripts/validator.js"></script>
</body>
</html>
app.js
(function () {
var app = angular.module('cgpaApp',['ngRoute','ngAnimate','ngMessages']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
controller: 'cgpaController',
templateUrl:'/app/views/cgpacalculate.html'
})
.otherwise({ redirectTo:'/'});
});
})();
cgpacalculate.html
<div>
Not Working Checkbox toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
.....some code
The checkbox inside Home.html is being displayed as a bootstrap toggle, whereas, the checkbox inside cgpacalculate.html is being displayed as a normal checkbox.
What have I missed?
I am trying to display a bootstrap toggle checkbox inside <ng-view></ng-view>. But a normal HTML checkbox is displayed instead of a bootstrap toggle. However, the same checkbox is getting displayed as a bootstrap toggle outside of the view (home page). Please find below the code
Home.html
<html ng-app='cgpaApp'>
<head>
<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/styles/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/styles/error.css" />
<link rel="stylesheet" type="text/css" href="/styles/bootstrap-toggle.min.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CGPA Calculator</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="#/Home">Home</a></li>
<li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
</ul>
</div>
</nav>
</header>
Working Checkbox toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No">
<main>
<ng-view></ng-view>
</main>
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-toggle.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-messages.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/cgpaController.js"></script>
<script src="app/controllers/headerController.js"></script>
<script src="scripts/validator.js"></script>
</body>
</html>
app.js
(function () {
var app = angular.module('cgpaApp',['ngRoute','ngAnimate','ngMessages']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
controller: 'cgpaController',
templateUrl:'/app/views/cgpacalculate.html'
})
.otherwise({ redirectTo:'/'});
});
})();
cgpacalculate.html
<div>
Not Working Checkbox toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
.....some code
The checkbox inside Home.html is being displayed as a bootstrap toggle, whereas, the checkbox inside cgpacalculate.html is being displayed as a normal checkbox.
What have I missed?
Share Improve this question edited Feb 15, 2016 at 9:24 Sachin Kariyattin asked Feb 15, 2016 at 9:19 Sachin KariyattinSachin Kariyattin 5605 silver badges19 bronze badges 3- You shouldn't try and mix standard bootstrap javascript with Angular. Use something like mgcrea.github.io/angular-strap or angular-ui.github.io/bootstrap that implements the bootstrap JS ponents using pure Angular code. – Beyers Commented Feb 15, 2016 at 9:32
- Use gist.github./dave-newson/f6c5e9c2f3bc315e292c for an angular toggle directive. – Johannes Jander Commented Feb 15, 2016 at 9:33
- @Beyers and Johannes. Thanks a lot for your inputs – Sachin Kariyattin Commented Feb 15, 2016 at 13:28
1 Answer
Reset to default 6Give the id to your checkbox as
<div>
Not Working Checkbox toggle:<input id="toggle-one" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
and in your controller initialize it as
$('#toggle-one').bootstrapToggle();
here is plnkr for your working code.
For more information you can refer http://www.bootstraptoggle./ - >Initialize by JavaScript
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744104831a4558677.html
评论列表（0条）