Как передать ngFocus/ngBlur директивному шаблону <input>?

Я пытаюсь создать настраиваемый компонент (директива), состоящий из окна <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, и я не могу понять, почему. Мысли?

Ответы

Ответ 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()

Ответ 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>[+]'
 }
});