I am currently developing a custom directive in angular.js 1.x
Here is how I call the directive:
<mydirective dirarg={{value-1}}></mydirective>
My goal is to define the directive by including code to alter the DOM within the directive's link function. The structure of the generated DOM depends on the value of dirarg, and I want certain elements to have an ng-click attribute.
I have successfully implemented ng-click functionality with the following approach:
app.directive('calendar',function($compile){
return{
link: function(scope, element, attributes){
element.append($compile("<button ng-click='testt()'>hi</button>")(scope));
}
}
});
When clicking the button created by this directive, the testt() function is executed. However, attempting to access dirarg within the testt() function causes it to break.
app.directive('calendar',function($compile){
return{
scope:{
dirarg: '@'
},
link: function(scope, element, attributes){
element.append($compile("<button ng-click='testt()'>"+scope.dirarg+"</button>")(scope));
}
}
});
The above code successfully displays the value of dirarg on the button, but the ng-click feature stops working. Is there a way to make both ng-click work and access the directive arguments simultaneously?
Just to clarify, the button example provided is just for illustration purposes. My actual scenario is more complex than a simple button, so suggestions on improving button creation in Angular are not needed.