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

问题描述

对于有角度的版本1.3.4.在以下代码段中，ng-change事件不起作用.

for angular version 1.3.4. In the following snippet , the ng-change event does not work.

依赖性:Bootstrap版本3.3.0

dependency: Bootstrap version 3.3.0

以下代码在1.2.27版之前有效

The below code works until version 1.2.27

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>

以下是插件(对于简单版本): http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2

Following is the plunkr (for the simpler version) : http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2

推荐答案

在处理Angular时，您不应依赖Bootstrap javascript. Bootstrap的jQuery插件不是为Angular量身定制的.如果要使用Bootstrap JS，则应考虑其他Angular模块，例如 AngularUI引导程序或AngularStrap ，其中提供了专用的指令，可实现相应的Bootstrap插件功能.

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.

这是AngularUI引导程序的外观:

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'])

这就是它的整体外观

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>

这篇关于ng-change，ng-click不适用于data-toggle ="buttons"从v1.3.0开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！