How to delegate ngFocus/ngBlur to directive's template <input> element?
Ok figured it out. Doron's answer was a good starting point for research, but now I think I have what you are looking for. The key is you have to use &
in the link section in order to get it to execute the expression.
.directive('myInput', function($timeout) { return { restrict: 'E', scope: { data: '=', blur: '&myBlur' //this is the key line }, template: '<input ng-blur="blur($event)" ng-model="data">' }})
This is how you use it:
<my-input my-blur="runBlurFunc()"></my-input>
If you really want to define the function on the root scope, you can use $scope.$root.onBlur()
instead of runBlurFunc()
Hope I got your question right, did you try to use the link function?
app.directive('myInput', function () { return { restrict: 'E', scope: { ngBlur: '&', ngFocus: '&' }, bindToController: true, controller: controllerFn, controllerAs: 'ctrl', link:function(scope){ scope.onBlur = function(ev){ console.log(ev); } scope.onFocus = function(ev){ console.log(ev); } }, template: '[-]<input ng-blur="onBlur($event)" ng-focus="onFocus($event)"></input>[+]' }});