How do I execute a custom function in an angularjs directive?

Question

I have the directive from angular smart table for adding a checkbox selection to the rows of the table shown below. I want to be able to execute a custom function when I click on the checkbox. Is this possible ? I basically need to store the rowid or another property of the rows when the checkbox is clicked.

app.directive('csSelect', function () {
    return {
        require: '^stTable',
        template: '<input type="checkbox"/>',
        scope: {
            row: '=csSelect'
        },
        link: function (scope, element, attr, ctrl) {

            element.bind('change', function (evt) {
                scope.$apply(function () {
                    ctrl.select(scope.row, 'multiple');
                });
            });

            scope.$watch('row.isSelected', function (newValue, oldValue) {
                if (newValue === true) {
                    element.parent().addClass('st-selected');
                } else {
                    element.parent().removeClass('st-selected');
                }
            });
        }
    };
});

EDIT

The way this directive is used as follows:

<td cs-select="row"></td>

note that if I add ng-click to the td element to check for a clicked row, it does not matter whether I click on the checkbox. As soon as I click anywhere inside the td element, it acts as that I clicked on the row. So that's not a solution

Sasikumar D.R. · Accepted Answer · 2015-11-27 18:07:46Z

1

app.directive('csSelect', function () {
    return {
        require: '^stTable',
        template: '<input type="checkbox"/>',
        scope: {
            row: '=csSelect',
            myFunc: '&cs-func'
        },
        link: function (scope, element, attr, ctrl) {

            element.bind('change', function (evt) {
                scope.$apply(function () {
                    ctrl.select(scope.row, 'multiple');
                });
            });

            scope.$watch('row.isSelected', function (newValue, oldValue) {
                if (newValue === true) {
                    element.parent().addClass('st-selected');
                    scope.myFunc();
                } else {
                    element.parent().removeClass('st-selected');
                }
            });
        }
    };
});

then

<td cs-select="row" cs-func='alert("hello")'></td>

answered Nov 27, 2015 at 18:07

Sasikumar D.R.

8621 gold badge6 silver badges17 bronze badges

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

2 Comments

Cemre Mengü Over a year ago

Tried this now but checkbox is not visible for some reason

Cemre Mengü Over a year ago

Works great! Thanks for your time

Arg0n · Accepted Answer · 2015-11-27 18:08:46Z

1

Add ng-click to the directives template.

template: "<input type='checkbox' ng-click='myFunc()'/>"

And in link/controller of directive:

scope.myFunc = function() { //Code };

answered Nov 27, 2015 at 18:08

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

Comments

cmw · Accepted Answer · 2015-11-27 18:07:37Z

You can expose functions to your template html in your directive by adding them to the scope argument injected into your link function.

You can use this for your change handler, and you can use ngClass to evaluate whether to attach the css class to your input.

Try something along these lines:

return {
  // ...,
  template: '<input ng-change="changeHandler()" ng-class="{'st-selected': row.isSelected}">',
  link: function (scope, elem, attrs, parentCtrl) {
    scope.changeHandler = function () {
      // parentCtrl.whatever(scope.row);
    };
  }
};

One thing your input is missing is an ngModel. I'm not sure what all is going on in your stTable directive, but you can and probably should bind your checkbox directive to a model. row.isSelected springs to mind.

trincot · Accepted Answer · 2015-11-27 19:12:33Z

0

Try:

ng-click="controller.function()"

edited Nov 27, 2015 at 19:12

trincot

357k38 gold badges282 silver badges338 bronze badges

answered Nov 27, 2015 at 17:58

Adam

851 silver badge8 bronze badges

1 Comment

Cemre Mengü Over a year ago

That unfortunately does not solve my problem, see the edit

Collectives™ on Stack Overflow

How do I execute a custom function in an angularjs directive?

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related