How to delegate ngFocus/ngBlur to directive's template <input> element? How to delegate ngFocus/ngBlur to directive's template <input> element? angularjs angularjs

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>[+]' }});