加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

从v1.3.0开始,角度变化,ng点击就不能使用data-toggle =“buttons

发布时间:2020-12-17 08:09:00 所属栏目:安全 来源:网络整理
导读:角度版本1.3.4。在以下代码段中,ng更改事件不起作用。 依赖:Bootstrap版本3.3.0 以下代码可以工作,直到版本1.2.27 JavaScript的 var app = angular.module("demoApp",['ngRoute']);app.controller('DemoController',function ($scope) { init(); function
角度版本1.3.4。在以下代码段中,ng更改事件不起作用。

依赖:Bootstrap版本3.3.0

以下代码可以工作,直到版本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>

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

当您处理Angular时,您不应该依赖Bootstrap javascript。 Bootstrap的jQuery插件不是针对Angular开箱即用的。如果要使用Bootstrap JS,您应该考虑额外的角色模块,如 AngularUI Bootstrap或 AngularStrap,它们提供了实现相应Bootstrap插件功能的专用指令。

以下是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>

请记住在这种情况下声明新的依赖关系:

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>

演示:http://plnkr.co/edit/pPTir7YGwJKt5L5oxVYX?p=preview

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读