ng-change,ng-click 不适用于 data-toggle="buttons";自 v1.3.0 [英] ng-change,ng-click don't work with data-toggle="buttons" since v1.3.0

问题描述

Angular 版本 1.3.4.在以下代码段中，ng-change 事件不起作用.

依赖:Bootstrap 3.3.0 版

以下代码在 1.2.27 版本之前有效

javascript

var app = angular.module("demoApp", ['ngRoute']);app.controller('DemoController', function ($scope) {在里面();函数初始化(){$scope.newItemType = '账单';$scope.change = 函数 () {警报($scope.newItemType)};}});app.config(function ($routeProvider) {$routeProvider.when('/prerak/list', {控制器:'演示控制器'，templateUrl: '/app/views/demo.html'})});

html

Demo
<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">插入新比尔 <span class="glyphicon glyphicon-file"></span><label class="btn btn-success"><input type="radio" value="coin" ng-change="change()" ng-model="newItemType">插入新硬币 <span class="glyphicon glyphicon-adjust"></span>

<br/><br/>所选项目:<b>{{newItemType}}</b>

以下是 plunkr(对于更简单的版本):http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2

解决方案

在处理 Angular 时，不应依赖 Bootstrap javascript.Bootstrap 的 jQuery 插件不是为开箱即用的 Angular 量身定制的.如果你想使用 Bootstrap JS，你应该考虑额外的 Angular 模块，比如 AngularUI Bootstrap 或 AngularStrap，提供实现相应 Bootstrap 插件功能的专用指令.

以下是使用 AngularUI Bootstrap 时的效果:

<label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">插入新比尔 <span class="glyphicon glyphicon-file"></span><label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">插入新硬币 <span class="glyphicon glyphicon-adjust"></span>

记得在这种情况下声明新的依赖:

angular.module("demoApp", ['ui.bootstrap'])

这是它的整体外观

angular.module("demoApp", ['ui.bootstrap']).controller('DemoController', function ($scope) {$scope.newItemType = '账单';$scope.change = 函数 () {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>单选按钮</h2><div class="btn-group"><label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">插入新比尔 <span class="glyphicon glyphicon-file"></span><label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">插入新硬币 <span class="glyphicon glyphicon-adjust"></span>

<p>所选项目:<b>{{newItemType}}</b></p>

演示: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-change,ng-click 不适用于 data-toggle="buttons";自 v1.3.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！