如何将 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> 框，我需要在 <my-input> 上设置 ng-blur 和 ng-focus 来响应输入上的模糊/焦点事件盒子。

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

1) 我感觉这可以通过更好的方式实现，但我似乎做不到。想法？

2) $event 似乎是 undefined 我不明白为什么。想法？

Answer 1

好的，想通了。多伦的回答是一个很好的研究起点，但现在我想我已经找到了你想要的东西。关键是你必须在链接部分使用& 才能让它执行表达式。

.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">'
    }
})

这是你使用它的方式：

<my-input my-blur="runBlurFunc()"></my-input>

如果你真的想在根作用域上定义函数，可以使用$scope.$root.onBlur()代替runBlurFunc()

Answer 2

希望我没听错你的问题，你尝试过使用链接功能吗？

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