Передача аргумента события для пользовательской директивы

Question

У меня есть следующая директива

.directive('uiBlur', function() { 
return function(scope, elem, attrs) { 
     elem.bind('blur', function() { 
     scope.$apply(attrs.uiBlur); 
    }); 
}; 

})

Это HTML

<input id="mainOdd1Id" type="number" ng-model="data.mainOdd1" placeholder="#1 Main Odd" onfocus="this.placeholder=''" min="0" step="any" ui-Blur="testfn('data.mainOdd1', $event, '#1 Main Odd');"> 

И это функция в контроллере

$scope.testfn = function(propertyName, $event, placeHolder){ 
    alert(propertyName); 
} 

Я вижу в отладчик, что $ event не определено ...

Что здесь не так?

Благодаря

Answer 1

Этот код сломана в более чем одном месте.

1. Attrs всегда строка. Поэтому вы не можете передать их в область. $ Apply, который ожидает функцию.
2. Вам нужно разобрать выражение, запускающее его с помощью функции $ parse.
3. Вам нужно использовать аргумент события, переданный слушателю событий.

Здесь работает пример:

angular 
 
    .module('app', []) 
 
    .directive('uiBlur', function($parse) { 
 
    return function(scope, elem, attrs) { 
 
     elem.bind('blur', function(event) { 
 
     scope.$apply(function() { 
 
      $parse(attrs.uiBlur)(scope, { 
 
      $event: event 
 
      }); 
 
     }); 
 
     }); 
 
    }; 
 
    }) 
 
    .controller('Example', function($scope) { 
 
    $scope.testfn = function(propertyName, $event) { 
 
     console.log(propertyName, $event); 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> 
 

 
<div ng-app="app" ng-controller="Example"> 
 
    <input type="text" placeholder="#1 Main Odd" ui-blur="testfn('data.mainOdd1', $event, '#1 Main Odd');"> 
 
</div>

Answer 2

Вы можете связать с uiBlur событие получило в директиве

.directive('uiBlur', function() { 
return function(scope, elem, attrs) { 
     elem.bind('blur', function(evt) { 
     scope.$apply(attrs.uiBlur.bind(evt); 
    }); 
}; 

Вы также, возможно, потребуется, чтобы связать свойства как data.mainOdd1 и # 1 Главный Одд