如何将ngFocus/ngBlur委托给指令的模板<input>元素？

Question

我正在尝试创建一个自定义组件(指令),它由一个<input>框和一个[-]和[+]按钮组成.目前,以下示例仅实现输入框.

所以,我说我的指令有以下HTML:

<my-input ng-blur="onBlur($event)" ng-focus="onFocus($event)"></my-input>

出于测试目的,我使用以下代码:

app.run(function ($rootScope) {
  $rootScope.onBlur = function ($event) {
    console.log('onBlur', $event);
  };

  $rootScope.onFocus = function ($event) {
    console.log('onFocus', $event);
  };
});

现在我想创建我的自定义<my-input>指令,它<input>在模板上有一个框,我需要ng-blur和ng-focus设置<my-input>为响应输入框上的模糊/焦点事件.

我有以下解决方案几乎工作:http://codepen.io/anon/pen/KpELmj

1)我有一种感觉,这可以用更好的方式实现,我似乎无法做到这一点.思考？

2) $event似乎是undefined,我无法理解为什么.思考？

Answer 1

希望我的问题是正确的，您是否尝试过使用链接功能？

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