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

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

1 个答案: