I need assistance in creating a directive that can dynamically insert buttons into a div. I have set up a json to store the button text, class, and action, but for some reason, the function does not trigger when the button is clicked. Can anyone point out my mistake?
Here is the template for the directive:
<div>
<button ng-repeat="button in buttons" ng-class="button.class" ng-click="button.action">
{{ text }}
</button>
</div>
The directive code looks like this:
.directive("myDirective", function() {
return {
restrict: 'E',
scope: {
buttons: '=buttons'
},
templateUrl: "url/to/template"
}
});
In your index.html file, you should include the directive with the following code snippet:
<my-directive buttons="[
{
action: scopeFunction,
test: 'my text',
class: 'my-class'
}
]"></my-directive>
Edit: It's not an issue with camel casing as suggested by others here. I have tried using a different name and the directive works fine, it's just the button action that isn't working.
Edit 2: Here is a jsfiddle link I created for better understanding: https://jsfiddle.net/umkzjn42/1/