Clever Geek Handbook

AngularJS: DOM manipulation of ng-repeat elements in directive

I am new to angularJS. I am trying to implement a simple functionality that has multiple checkbox options and one specific function needs to be called when these checkbox options are clicked something similar to

 $(parentDiv).on("click",'input[type="checkbox"]', functionToBeCalled});

I am trying to use a directive for this section with content like

 <div>
    <span ng-repeat="subsection in section"><input type="checkbox"  value="subsection.name"></input> {{subsection.name}} </span>
</div>

Catalog

app.directive('myDir', function() {
  return {
    restrict: 'AE',
    replace: true,
    templateUrl: 'filter.html',
    link: function(scope, elem, attrs) {
      elem.find("input").bind('click', function() {
        //do some data manipulation
      });
    });
 };
});

When I use the link function, I find that if I use elem.find ('input [type = "checkbox"]) I get an empty object, so it doesn't compile before. Please let me know how to resolve this situation. I did a little research and found out about a compilation function that manipulates the DOM before binding, but I can't think of a forward approach. Any help would be appreciated. Thanks in advance.

+3


source to share


2 answers


Use ngClick or ngChange . Inn directive angularjs

<div>
    <span ng-repeat="subsection in section">
    <input type="checkbox"  value="subsection.name" ng-click="myFunc(subsection.name)" /> {{filter.name}} </span>
</div>


here in the example i used ng-click = "myFunc" and put the value in this function

+1


source


This can help us know what the directive looks like, and specifically which directive is element

attached to as you are talking about elem

.

That said, if you only want functions that need to be called when a tick is clicked, you can use angular's built-in functions for that:



0


source






More articles:


All Articles