How to data bind directive that wraps an element in angular

Question

I have a directive that creates a wrapper for an element. The problem with this is the "is-selected" class does not toggle based on the myValue value. I feel like it has something to do with how I'm implementing ng-class with angular element but I'm not sure how to fix this. Any ideas??

Basically I want the wrapping <label> element to have a class based on the the child model value.

    <input my-checkbox type="checkbox" ng-model="myValue" ng-true-value="1" ng-false-value="0">


  module.directive('myCheckbox', function($compile) {
    return {
      restrict: 'A',
      scope: {
        ngModel: '='
      },
      link: function(scope, element) {
        element.attr('type', 'checkbox');
        var wrapperEl = angular.element('<label class="checkbox-label" ng-class="{\'is-selected\': ngModel}"></label>');
        if(scope.ngModel) {
          wrapperEl.addClass('is-selected');
        }
        wrapperEl.on('click', function() {
          // console.log("wrapperEl: %o", wrapperEl);
          var w = angular.element(element[0].parentNode);
          if(scope.ngModel) {
            w.addClass('is-selected');
          } else {
            w.removeClass('is-selected');
          }
        });
        element.wrap(wrapperEl);
        wrapperEl = element.parent();
        var checkEl = angular.element('<i class="Icon Icon--check text-success Icon--lg" ng-show="ngModel"></i>');
        element.attr('style', 'position: absolute; left: -9999px;');
        element.after(checkEl);
        $compile(checkEl)(scope);
      }
    };
  });

Have you checked out the second answer at stackoverflow.com/questions/16928341/… — sova
– sova, Commented Nov 1, 2016 at 20:23
you are using 1 and 0 for the values of ng-model, but this makes your click no longer operate like a toggle, since both 1 == true and 0 == true; your if(scope.ngModel) isn't evaluating based on the value, it is evaluating on the presence of a value. If you used the default true and false values for the checkbox, this logic would work. — Claies
– Claies, Commented Nov 1, 2016 at 23:38
if you must use 1 and 0, then changing your statement to if (scope.ngModel == 1) should be enough. however, this breaks the moment someone uses the directive without the ng-true-value statement. — Claies
– Claies, Commented Nov 1, 2016 at 23:42

KingKongFrog · Accepted Answer · 2016-11-04 16:59:52Z

0

I fixed this by adding the $watch method.

scope.$watch('ngModel', function() {
  if(scope.ngModel) {
    wrapperEl.addClass('is-selected');
  }
  else
  {
    wrapperEl.removeClass('is-selected');
  }
});

answered Nov 4, 2016 at 16:59

KingKongFrog

14.5k22 gold badges78 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to data bind directive that wraps an element in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related