Trying to create a dynamic button that changes styles on each click is proving challenging.
The console error "'initial' is not defined" has been persistent, despite my efforts to troubleshoot the issue.
Could it be an incorrect approach to retrieve a value from the view?
In addition, the click event I implemented in the link function doesn't seem to be functioning at all.
Your guidance on creating an effective angular directive would be greatly appreciated! Thank you!
html
<div button-ok initial="glyphicon-plus" after="glyphicon-ok" base="glyphicon"></div>
Introducing a new directive named "button-ok"
myapp
.run(function($templateCache) {
var button;
button = "<div class='btn btn-default'></div>";
$templateCache.put('okbutton.html', button);
})
.directive('buttonOk', function($templateCache) {
var icon;
icon = angular.element("<i></i>");
return {
restrict: 'EA',
scope: {
initial: "@",
after : "@",
base : "@"
},
replace : true,
template: $templateCache.get('okbutton.html'),
compile: function(tElem) {
icon.addClass(base);
icon.addClass(initial);
tElem.append(icon);
},
link: function(scope, elem) {
elem.click(function() {
if(icon.hasClass(initial)){
icon.removeClass(initial);
icon.addClass(after);
}else{
icon.removeClass(after);
icon.addClass(initial);
}
});
}
};
});
});