19

I made a small angular module to integrate with the bootstrap "buttons-group" ('s plus a bit of javascript to make them work like radio buttons. I made it on this module to do the same for checkboxes: http://jsfiddle.net/evaneus/z9rge/

My code is at http://jsfiddle.net/askbjoernhansen/YjMMD/

My questions:

1) Is this the right approach?

2) Will the model be watched three times, or does $scope.$watch() figure out that it's the same model and just do it once? It seems that way.

3) Is it "correct" to muck around with the DOM in the $watch function like I do? It feels "dirty", but I guess that's what I am asking for when I am adding angular to something that's not angularjs compatible natively. Or?

4) Is there a way to put the ng-model attribute on the btn-group instead of on each button? That'd make it appear a lot cleaner.

You can see it at my jsfiddle above, or the code is here, first the html:

 <!-- to test the two-way model -->
  <input name="test" type="radio" ng-model="myModel['A']" value="left"> Left<br>
  <input name="test" type="radio" ng-model="myModel['A']" value="middle"> Middle<br>
  <input name="test" type="radio" ng-model="myModel['A']" value="right"> Right<br>


myModel A {{myModel['A']}}<br/>

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" buttons-radio=""
    ng-model="myModel['A']" value="left"   class="btn">Left</button>
  <button type="button" buttons-radio=""
    ng-model="myModel['A']" value="middle" class="btn">Middle</button>
  <button type="button" buttons-radio=""
    ng-model="myModel['A']" value="right"  class="btn">Right</button>
</div>

And the javascript:

angular.module('buttonsRadio', []).directive('buttonsRadio', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, element, attr, ctrl) {
            element.bind('click', function() {
                $scope.$apply(function(scope) {
                    ctrl.$setViewValue(attr.value);
                });
            });

            // This should just be added once, but is added for each radio input now?
            $scope.$watch(attr.ngModel, function(newValue, oldValue) {
                element.parent(".btn-group").find('button').removeClass("active");
                element.parent(".btn-group")
                .find("button[value='" + newValue + "']").addClass('active');
            });
        }
    };
});​
Improve this question
2
  • I was wondering, what exactly is the 4th parameter (Ctrl) of the link function in your directive? Commented May 25, 2013 at 22:37
  • @Cybrix I think that'd be the angular controller; but I haven't worked with AngularJS for too long to remember. :-) Commented Dec 5, 2013 at 23:16

2 Answers 2

Reset to default
26

You are invoking the directive three times, once for each button. AFAIK this means the linking function is called three times, binding events and watching for changes. added a little more on this below.

It's fine to change the DOM when models change, but what you are doing - changing classes and values - can be done automatically by angular using bi-directional data-binding and native directives such as ng-class

You can create a directive that renders buttons given a list of options. For example if you have this model and these options

$scope.myOptions = ["Left", "Middle", "Right"];
$scope.myModel = "Left"

You can create a buttons-radio directive like this 

App.directive('buttonsRadio', function() {
    return {
        restrict: 'E',
        scope: { model: '=', options:'='},
        controller: function($scope){
            $scope.activate = function(option){
                $scope.model = option;
            };      
        },
        template: "<button type='button' class='btn' "+
                    "ng-class='{active: option == model}'"+
                    "ng-repeat='option in options' "+
                    "ng-click='activate(option)'>{{option}} "+
                  "</button>"
    };
});​

which can be invoked from your HTML

<buttons-radio class="btn-group" data-toggle="buttons-radio" 
               model='myModel'    
               options='myOptions'>
</buttons-radio>

Things to notice:

  1. The template uses an ng-repeat directive which goes through all options and compiles buttons accordingly.
  2. The directive has its own controller and isolated scope with model and options to accept bi-directional binding, so angular does its magic when the directive changes their values.
  3. If the option matches the current value of the model, then the button is assigned an active class.
  4. When a button is pressed, the method activate (from the directives controller) is called, and it changes the value of the model.

Heres a JSFiddle http://jsfiddle.net/jaimem/A5rvg/4/

EDIT

I wasn't completely sure about this, but yes, your model will have three different watchers, one for every directive invocation. If you are using Batarang you can see all the watched expressions from the Performance tab and the AngularJS Properties panel. Batarang also exposes an $scope convenience property, so you can look for your model's watch objects by running the following from the console

$scope.$$watchers.filter(function(w){return w.exp ==="myModel['A']"});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Beautiful, thanks jm! It worked with no modifications and was very easy to work with for the tweaks I wanted to make. Also thianks for the Batarang reference, I hadn't seen that before. My old version didn't do the two-way stuff properly in my actual application, your solution does. Awesome, thank you again! I kept the angular.module() syntax; that seems like it's better because I could put this in a reusable module then? Or?
You are welcome, and yes, keeping related directives into modules makes sense.
For anybody wrestling with minification, the controller constructor function can be rewritten with the annotated style: controller: ['$scope', function ($scope) { $scope.activate = function (option) { $scope.model = option; };}]
Works nicely, thanks! However, when using Twitter Bootstrap 3, the "active" class is not set. Any insight as to why? Updated the fiddle: jsfiddle.net/A5rvg/79
7

this is simple

<html>
    <div class="btn-group" data-toggle="buttons">
      <span class="btn btn-primary" ng-click="worktype=1" ng-class="worktype==1?'active':''">
        <input type="radio"   value="1">全职
      </span>
      <span class="btn btn-primary" ng-click="worktype=2" ng-class="worktype==2?'active':''">
        <input type="radio"   value="2">兼职
      </span>
    </div>
</html>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.