Как добавить новые функции для ng-blur в контроллере?

Question

Я хочу добавить новую функцию в ng-blur всех полей ввода / текстовой области. Поля ввода и текстовые поля имеют существующее ng-blur в html, и я хочу добавить новую функцию к существующему ng-blur в контроллере.

Я пытался добавить его с помощью setAttribute, но он переопределяет существующие функции ng-blur.

const formElems= iElem[0].querySelectorAll('input, textarea');
formElems[0].setAttribute('data-ng-blur', 'newFunction()');
$compile(angular.element(formElems[0]))($scope);

Я хочу расширить функции внутри ng-blur, но не напрямую в HTML.

Как добавить новые функции внутри контроллера к нг-размытию всех входных и текстовых областей и сохранить текущие функции?

Answer 1

Наконец, я нашел решение, сначала получив существующий атрибут, используя getAttribute ().

const oldAttributes = formElems[0].getAttribute('ng-blur');
formElems[0].setAttribute('ng-blur', oldAttributes + ' testConsole();');

Answer 2

Вам не нужно ничего делать в вашем шаблоне.

Просто создайте новую функцию в вашем контроллере и вызовите эту функцию из уже существующей функции. Это не нарушит вашу существующую функциональность.

См. Пример ниже -

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
  
  $scope.myFunction = function(){
    console.log('Your current working code');
    $scope.extendedFunction();
  }
  
  $scope.extendedFunction = function(){
    console.log('You should write your new code here');
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName" ng-blur="myFunction();"><br>
Last Name: <input type="text" ng-model="lastName" ng-blur="myFunction();"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>