NG-变化，NG-单击不与数据切换= QUOT工作;按钮]自V1.3.0 [英] ng-change,ng-click dont work with data-toggle="buttons" since v1.3.0
本文介绍了NG-变化，NG-单击不与数据切换= QUOT工作;按钮]自V1.3.0的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有角版本1.3.4。在下面的片段中，NG-change事件不起作用。
相关性：引导3.3.0版
下面code工作，直到版本1.2.27
的JavaScript
VAR应用= angular.module（demoApp，['ngRoute']）;app.controller（'DemoController'，函数（$范围）{
在里面（）;
功能的init（）{
$ scope.newItemType ='法案';
$ scope.change =功能（）{
警报（$ scope.newItemType）
};
}
}）;的app.config（函数（$ routeProvider）{
$ routeProvider
。当（'/ preRAK /列表'，{
控制器：'DemoController'，
templateUrl：/app/views/demo.html
}）
}）;
HTML
＆LT; H4＆GT;示范及LT; / H4＆GT;＆LT; BR /＆GT;＆LT; DIV＆GT;
＆LT; DIV CLASS =BTN-组数据切换=按钮＆GT;
＆LT;标签类=BTN BTN-成功＆GT;
＆LT;输入类型=无线电VALUE =法案NG变化=更改（）NG模型=newItemType＆GT;插入新比尔＆LT;跨度类=glyphicon glyphicon文件＆GT;＆LT; / SPAN＆GT;
＆LT; /标签＆gt;
＆LT;标签类=BTN BTN-成功＆GT;
＆LT;输入类型=无线电VALUE =硬币NG变化=更改（）NG模型=newItemType＆GT;插入新硬币，LT;跨度类=glyphicon glyphicon调整＆GT;＆LT; / SPAN＆GT;
＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; BR /＆GT;＆LT; BR /＆GT;选定条目：＆LT; B＆GT; {{newItemType}}＆LT; / B＆GT;
＆LT; / DIV＆GT;
以下是plunkr（为简单的版本）： http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2
解决方案
您不应该依赖于JavaScript的引导时，应对角。引导的jQuery插件不会为角量身定制的开箱。如果你想使用JS引导你应该考虑更多的角模块，如 AngularUI引导或 AngularStrap ，它提供了一个实现相应的引导插件功能的专用指令。
下面是它会如何看待与AngularUI引导：
＆LT; DIV CLASS =BTN-组＆GT;
＆LT;标签类=BTN BTN-成功的BTN-无线电='法案'NG-变化=更改（）NG模型=newItemType＆GT;
插入新比尔＆LT;跨度类=glyphicon glyphicon文件＆GT;＆LT; / SPAN＆GT;
＆LT; /标签＆gt;
＆LT;标签类=BTN BTN-成功的BTN-无线电='硬币'NG-变化=更改（）NG模型=newItemType＆GT;
插入新硬币，LT;跨度类=glyphicon glyphicon调整＆GT;＆LT; / SPAN＆GT;
＆LT; /标签＆gt;
＆LT; / DIV＆GT;
请记住，在这种情况下，宣布新的依赖：
angular.module（demoApp，['ui.bootstrap']）
下面是如何看都在一起
\r
\r\r
\r angular.module（demoApp，['ui.bootstrap']）。控制器（'DemoController'，函数（$范围）{\r
$ scope.newItemType ='法案';\r
$ scope.change =功能（）{\r
的console.log（$ scope.newItemType）\r
};\r
}）; \r
＆LT;链接rel =stylesheet属性HREF =https：//开头maxcdn。 bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css/＆GT;\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js\"></script>\r
＆所述; SCRIPT SRC =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT; DIV CLASS =容器NG-应用=demoAppNG控制器=DemoController＆GT;\r
＆LT; H2＆GT;单选按钮＆LT; / H＆GT;\r
＆LT; DIV CLASS =BTN-组＆GT;\r
＆LT;标签类=BTN BTN-成功的BTN-无线电='法案'NG-变化=更改（）NG模型=newItemType＆GT;\r
插入新比尔＆LT;跨度类=glyphicon glyphicon文件＆GT;＆LT; / SPAN＆GT;\r
＆LT; /标签＆gt;\r
＆LT;标签类=BTN BTN-成功的BTN-无线电='硬币'NG-变化=更改（）NG模型=newItemType＆GT;\r
插入新硬币，LT;跨度类=glyphicon glyphicon调整＆GT;＆LT; / SPAN＆GT;\r
＆LT; /标签＆gt;\r
＆LT; / DIV＆GT;\r
＆LT; P＆GT;选定的项目：其中，B＆GT; {{newItemType}}＆LT; / B＆GT;＆LT; / P＆GT;\r
＆LT; / DIV＆GT; \r
演示： http://plnkr.co/edit/pPTir7YGwJKt5L5oxVYX?p=preVIEW
for angular version 1.3.4. In the following snippet , the ng-change event does not work.
dependency: Bootstrap version 3.3.0
The below code works until version 1.2.27
javascript
var app = angular.module("demoApp", ['ngRoute']);
app.controller('DemoController', function ($scope) {
init();
function init() {
$scope.newItemType = 'bill';
$scope.change = function () {
alert($scope.newItemType)
};
}
});
app.config(function ($routeProvider) {
$routeProvider
.when('/prerak/list', {
controller: 'DemoController',
templateUrl: '/app/views/demo.html'
})
});
html
<h4>Demo</h4>
<br />
<div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" value="bill" ng-change="change()" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success">
<input type="radio" value="coin" ng-change="change()" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<br/><br/> Selected Item: <b>{{newItemType}}</b>
</div>
Following is the plunkr (for the simpler version) : http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2
解决方案
You should not rely on Bootstrap javascript when you deal with Angular. Bootstrap's jQuery plugins are not tailored for Angular out of the box. If you want to use Bootstrap JS you should consider additional Angular modules like AngularUI Bootstrap or AngularStrap, which provide dedicated directives that implements corresponding Bootstrap plugins functionality.
Here is how it would look with AngularUI Bootstrap:
<div class="btn-group">
<label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
Remember to declare new dependency in this case:
angular.module("demoApp", ['ui.bootstrap'])
Here is how it will look all together
angular.module("demoApp", ['ui.bootstrap']).controller('DemoController', function ($scope) {
$scope.newItemType = 'bill';
$scope.change = function () {
console.log($scope.newItemType)
};
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<div class="container" ng-app="demoApp" ng-controller="DemoController">
<h2>Radio Buttons</h2>
<div class="btn-group">
<label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<p>Selected Item: <b>{{newItemType}}</b></p>
</div>
Demo: http://plnkr.co/edit/pPTir7YGwJKt5L5oxVYX?p=preview
这篇关于NG-变化，NG-单击不与数据切换= QUOT工作;按钮]自V1.3.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
