I am encountering an issue with my form directive where I need to intercept ng-click events nested within varying child scopes of the form element. However, I am struggling to hook into these events or child scope properties in a generic way.
For demonstration purposes, you can view a demo here.
html
<body ng-controller="MainCtrl">
<form my-form-directive>
<div ng-controller="SubCtrl">
<a ng-click="changeName()">click me</a>
</div>
</form>
</body>
javascript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.controller('SubCtrl', function($scope) {
$scope.name = 'John';
$scope.changeName = function() {
$scope.name = 'Peter';
}
});
app.directive('myFormDirective',
function() {
return {
link: function($scope, element, attrs, controller) {
// Looking to watch for ng-click or $scope.name changes and log 'Peter' to console
// Without assuming nested location of element with ng-click (catch all form ng-click events)
}
};
}
);
Any assistance would be greatly appreciated. Thank you.