AngularJS 中的 Angular-UI Bootstrap 切换按钮

Question

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

我试图用这里的替换它们

我将代码粘贴到我的 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>

现在我想连接控制器。 因此，我使用来自 angular-ui 站点的 JS 内容创建了一个文件“elements-buttons.controller.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 来调试您的问题。

在这里检查。

我发现它没有问题。

您应该检查的关键点：

• 确保您添加了所有必需的文件，例如 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，你应该很高兴