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.
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
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:
- ngChange
- ngClick