AngularJS 中的 Angular-UI Bootstrap 切换按钮

Question

我最初在我的应用程序中有默认的 Bootstrap 3.3 切换按钮。这些是模仿复选框或单选按钮行为的按钮分组。

我试图用 here 替换它们

我将代码粘贴到我的 html 中，起初看起来不错：

<div class="btn-group">
  <label class="btn btn-default" ng-model="checkModel.left" btn-checkbox>Left</label>
  <label class="btn btn-default" ng-model="checkModel.middle" btn-checkbox>Middle</label>
  <label class="btn btn-default" ng-model="checkModel.right" btn-checkbox>Right</label>
</div>

现在我想连接控制器。因此，我创建了一个文件“elements-buttons.controller.js”，其中包含来自 angular-ui 站点的 JS 内容：

(function() {
  'use strict';
  angular.module('pb.ds.elements').controller('ButtonsController',
    function($log) {
      var _this = this;
      _this.singleModel = 1;
      _this.radioModel = 'Middle';
      _this.checkModel = {
        left: false,
        middle: true,
        right: false
      };
    });
})();

我将控制器放入我的路由器：

.state('elements.buttons', {
  url: '/elements/buttons',
  templateUrl: 'modules/elements/templates/elements-buttons.html',
  controller: 'ButtonsController as buttons'
})

现在，一旦我将控制器链接到我的 index.html，按钮组就会失去所有样式：

这对我来说毫无意义。检查 Chrome 中的代码表明，如果事实由于某种原因丢失了所有类：

<div class="btn-group">
  <label class="" ng-model="buttons.checkModel.left" btn-checkbox="">Left</label>
  <label class="" ng-model="buttons.checkModel.middle" btn-checkbox="">Middle</label>
  <label class="" ng-model="buttons.checkModel.right" btn-checkbox="">Right</label>
</div>

现在，由于我使用了“controller as”语法，我确实确保尝试将其添加到模型 ng-model="buttons.checkModel.right" 中，但无论是否使用相同的东西。没有控制器，看起来不错。控制器，繁荣。

编辑/更新：控制台中没有任何错误。

Answer 1

我创建了一个 jsfiddle 来调试您的问题。

Check it here.

我没有发现任何问题。

你应该检查的关键点：

• 确保您添加了所有必需的文件，例如 ui-bootstrap.js
• ui-bootstrap.css
• jquery，因为这只是 Angular 的指令，它还需要 jQuery（就像原始引导程序一样）
• 在你的应用定义中包含对 ui-bootstrap 的依赖，注意这一行 -> angular.module('app', ['ui.bootstrap', 'app.controllers']);
• ng-app 和 ng-controller 在标记上。确保您没有忘记这一点

在小提琴上，我没有使用 ui-router，但您应该检查控制器是否确实在加载（您可以在那里添加一个 console.log 并检查控制器是否已加载）。

我喜欢这个指南和 jsfiddle，你应该很高兴