Javascript 引导切换复选框在ng视图中不起作用
我试图在Javascript 引导切换复选框在ng视图中不起作用,javascript,html,css,angularjs,twitter-bootstrap,Javascript,Html,Css,Angularjs,Twitter Bootstrap,我试图在内显示一个引导切换复选框。但是会显示一个普通HTML复选框,而不是引导切换。但是,相同的复选框在视图(主页)之外显示为引导切换。请找到下面的代码 Home.html <html ng-app='cgpaApp'> <head> <link rel="stylesheet" type="text/css" href="/styles/bootstrap.m
内显示一个引导切换复选框。但是会显示一个普通HTML复选框,而不是引导切换。但是,相同的复选框在视图(主页)之外显示为引导切换。请找到下面的代码
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>
<div>
Not Working Checkbox toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
.....some code
cgpacalculate.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>
<div>
Not Working Checkbox toggle:<input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
.....some code
不工作复选框切换:
…一些代码
Home.html中的复选框显示为引导切换,而cgpacalculate.html中的复选框显示为普通复选框
我遗漏了什么?将您的复选框id作为
<div>
Not Working Checkbox toggle:<input id="toggle-one" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" >
</div>
是您的工作代码的plnkr
有关更多信息,请参考,不要尝试将标准引导javascript与Angular混合使用。使用类似或的东西,使用纯角度代码实现引导JS组件。用于角度切换指令。@Beyers和Johannes。非常感谢您的投入。这进一步证明Stackoverflow是迄今为止找到技术问题解决方案的最佳场所。再次非常感谢你。