How to use same directive multiple times with parent in AngularJS

Question

I've got following script

// Code goes here

angular.module('default', [])
  .directive('webAbc', function($log) {
    return {
      restrict: 'A',
      controller: function($scope, $element, $attrs, $transclude) {
        this.checkboxes             = [];
        this.updateLinkedCheckboxes = function(value) {
          angular.forEach(this.checkboxes, function(checkbox, index) {
            checkbox.setChecked(value);
          });
        };
      }
    };
  })
  .directive('webDef', function($log) {
    return {
      restrict: 'C',
      require: '^webAbc',
      link: function (scope, iElement, iAttrs, webAbc, transcludeFn) {
        iElement.bind('change', function () {
          webAbc.updateLinkedCheckboxes(iElement.prop('checked'));
          scope.$apply();
        });
      }
    };
  })
  .directive('webGhi', function($log) {
    return {
      restict: 'A',
      require: '^webAbc',
      link: function (scope, iElement, iAttrs, webAbc, transcludeFn) {
        scope.setChecked = function(value) {
          $log.log('This element ' + iAttrs.name + ' cheked: ' + (!value ? 'checked' : ''));
          $log.log(value);
          if (value)
          {
            iElement.attr('checked', 'checked');
          }
          else
          {
            iElement.remoteAttr('checked');
          }
        };

        webAbc.checkboxes.push(scope);
      }
    };
  });

it should select or deselect all checkboxes in table in marked column, but I can't make it work with following solution.

First of all it seems, that only last webGhi is visible due to print out in console. And even more, it seems, that I can't uncheck checkbox for some reason.

Link to an example: http://jsbin.com/difihabe/1/

Thank you.

tasseKATT · Accepted Answer · 2014-05-17 21:09:14Z

3

Use an isolated scope in the webGhi directive or all four instances of it will push the same scope (the parent):

.directive('webGhi', function($log) {
  return {
    restict: 'A',
    require: '^webAbc',
    scope: {},
    link: ...

Also instead of adding/removing the checked attribute either use:

jQuery's prop() function: iElement.prop('checked', value);
Directly setting the DOM element's checked property: iElement[0].checked = value;

Demo: http://jsbin.com/tudotugi/2/

answered May 17, 2014 at 21:09

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

2 Comments

Eugene Over a year ago

This is great. Thank you. To clear things up, if no local scope defined, then last element will overwrite it for all of them and therefore only it will be used, correct? And settings local scope will make each of the rows unique, correct?

tasseKATT Over a year ago

All four instances of the directive will use the same scope (the parent). webAbc.checkboxes.push(scope); will be called four times, which means there will be four references to the parent scope in the array. All four instances will define scope.setChecked = function(value) on the same scope. This means that all four references in the array will have the setChecked defined by the last of the four as it will overwrite the others. As the setChecked function contains a referece to iElement of the fourth instance of the directive, this is the one working (semi-working) in your example.

Collectives™ on Stack Overflow

How to use same directive multiple times with parent in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related