Currently, I am facing an issue with my code. I have set up a fiddle that demonstrates a directive displaying an alert and also a controller with an alert function. Everything is functioning correctly except for the fact that the binding for the text on the button is being lost. Does anyone have any ideas or suggestions to help me troubleshoot this problem?
<div ng-app="directiveApp" ng-controller="MainController">
<button ng-click="doStuff()" unsaved-warning-trigger>
{{buttonText}}
</button>
</div>
var app = angular.module("directiveApp", []);
app.directive('unsavedWarningTrigger',
function() {
return {
priority: 1,
terminal: true,
link: function (scope, element, attr) {
var clickAction = attr.ngClick;
element.bind('click',function () {
if (window.confirm("Sure?")) {
scope.$eval(clickAction)
}
});
}
};
}
);
MainController = function($scope) {
$scope.buttonText = 'bound button';
$scope.doStuff = function () {
alert("doing stuff");
};
}