up vote 0 down vote favorite

I originally had the default Bootstrap 3.3 toggle buttons in my app. These are the grouping of buttons that mimic the behavior of checkboxes or radio buttons.

I was trying to replace them with the ones here

I paste the code into my html, and at first it looks fine:

enter image description here

  <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

Now I want to hook up the controller. So, I create a file "elements-buttons.controller.js" with the contents of the JS from the angular-ui site:

(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
    };
  });
})();

I put the controller into my router:

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

Now, as soon as I link the controller to my index.html, the button group loses all styling:

enter image description here

Which makes no sense to me at all. Inspecting the code in Chrome shows it's if fact lost all its classes for some reason:

<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>

Now, since I have used "controller as" syntax, I did make sure to try adding that to the model ng-model="buttons.checkModel.right" but with or without this same thing. No controller, looks fine. Controller, boom.

EDIT/UPDATE: There are no errors in the console of any kind.

share|improve this question
    
Try controllerAs: in the .state definitions – shivas May 12 '15 at 13:48
    
But I have many state, all with controller as syntax and this works perfectly with all of them: controller: 'ChartColorsController as charts', – Steve May 12 '15 at 13:50
    
@Steve Can you post fiddle of your issue? – Kalpesh Patel May 12 '15 at 13:54
up vote 0 down vote

I have created a jsfiddle in order to debug your problem.

Check it here.

And Im finding no problems on it.

Key points you should check:

  • Be sure you are adding all neccessaries files, such as ui-bootstrap.js
  • ui-bootstrap.css
  • jquery, since this are just directives for angular, it will also need jQuery (as the original bootstrap does)
  • include the dependency on ui-bootstrap on you app definition, pay attention to this line -> angular.module('app', ['ui.bootstrap', 'app.controllers']);
  • ng-app & ng-controller on the markup. Be sure you are not forgetting this

On the fiddle, Im not using ui-router, but you should check that the controller is indeed loading (you can add a console.log there and check that the controller is loaded).

I thing with this guidelines and the jsfiddle, you should be good to go

share|improve this answer
    
I'll try it, but the odd thing is that every other page in my app that uses bootstrap directives work perfectly. this is the only one causing an issue. – Steve May 12 '15 at 17:13
    
Did you have any update ? Did you try my suggestions ? You can also prepare a jsfiddle to reproduce your issue, in case mine was not enough. – avcajaraville May 13 '15 at 7:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.