为此,下一步就是要拿到UI Bootstrap的文件,放到我们的项目中。那么我们能够在我们的Angular模块中导入ui.bootstrap。就这样,我们就能够获取需要模仿BootstrapJS组件的指令(directives )!
// 创建 angular app 导入 ui.bootstrapangular.module('app', ['ui.bootstrap']).controller('mainController', function($scope) { // BUTTONS ====================== // 设置数据 $scope.bigData = {}; $scope.bigData.breakfast = false; $scope.bigData.lunch = false; $scope.bigData.dinner = false; // COLLAPSE ===================== $scope.isCollapsed = false; });
现在,正确的使用方式是,当按下按钮时调整这些变量的值。
使用UI Bootstrap按钮指令(Directive)
通过UI Bootstrap文档 ,使用复选框按钮正确的方法是添加 ng-model 的定义对象,并添加 btn-checkbox 属性。下面是我们按钮的代码: