javascript - Bootstrap toggle checkbox not working inside ng-view

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?

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 asked Feb 15, 2016 at 9:19 Sachin Kariyattin 5605 silver badges19 bronze badges

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

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

Give 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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap toggle checkbox not working inside ng-view - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)