I decided to create a reusable directive in order to make a common component, but I am facing an issue trying to capture the click event of an element inside the template used within the directive.
Take a look at the code snippet below for better understanding:
myApp.directive('importPopup', function ($timeout) {
return {
restrict: 'E',
template: '<button class="btn btn-primary save-btn floatLeft">Import
</button>',
scope: {},
link: function(scope, element, attrs) {
element.bind('click', function(){
angular.element('body').append('
<div class="popupContainer">
<button> x </button>
<div>
Enter Number: <input type="text" ng-model="noToImport">
</div>
<button type="button" id="importBtn" ng-click="importClick()">Import</button>
</div>');
});
scope.importClick = function() {
console.log(' import document for Rule no - ' + scope.noToImport);
}
}
}
});
I'm currently facing difficulties with:
1) triggering the event when #importBtn is clicked
2) retrieving the value from the model 'noToImport'
Please check out this Plunkr for reference.
Any assistance on this matter would be greatly appreciated. Thank you in advance.