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，你應該很高興