I am currently working with the following directive.
(function () {
'use strict';
angular.module('ap.App')
.directive('clearCancelFinishButtonsHtml', function () {
return {
scope: {
clearFunction: '='
},
replace: true,
templateUrl: 'directives/clearCancelFinishButtons.html',
link: function (scope, el, attrs) {
var clear= angular.element(el.find('button.clear'));
console.log(el.find('.clear'));
clear.bind("click", function () {
alert("here");
});
}
}
});
})();
In my code, the above directive is associated with the following HTML structure:
<div class="row pull-right">
<div class="col-lg-12 col-md-12 col-sm-12">
<button type="button" class="custom-default clear">CLEAR</button>
<button type="button" class="custom-danger">CANCEL</button>
<button type="button" class="custom-info" ng-click="ap.save()">FINISH</button>
</div>
</div>
The main goal I have is to target the button with the clear class within the directive and trigger a click event on it. However, despite being able to implement the click event for the element itself, I'm facing difficulties in binding it to the child element. Any assistance or suggestions on this matter would be highly appreciated.
PS. The way I am using the directive is
<clear-cancel-finish-buttons-html id="{{$id}}" clear-function="'resetConfigurationPageInputs'">
</clear-cancel-finish-buttons-html>UPDATE----------
My ultimate objective is to dynamically add and remove functions directly from the directive declaration itself.