angularjs - 如何将 ngFocus/ngBlur 委托(delegate)给指令的模板 <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

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

.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()