KingKongFrog KingKongFrog - 1 month ago 17
AngularJS Question

How to data bind directive that wraps an element in angular

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 implenenting ng-class with angular element but I'm not sure how to fix this. Any ideas??

Basically I want the wrapping 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);
}
};
});

Answer

I fixed this by adding the $watch method.

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