Я хочу, чтобы моя директива поддерживала события ng-change, но вместо определения конкретной функции, вызываемой при срабатывании ng-change, я хочу, чтобы ng-change принимал любую функцию с одним или несколькими параметрами и выполнял ее. Я мог придумать два способа, но не знаю, какой из них правильный, а какой сработает. Это выглядит примерно так:

Метод 1:

HTML:

<currency-input width="200px"  id="iextz" ng-model="currency1" ng-change="someFunction(argument1,argument2,.....)" currency="$" decimals="2"></currency-input>

JS:

numericApp.directive('currencyInput',........
   ...................................
   return {
                restrict: 'E',
                scope:{
                    ngModel : "=",
                    id : "@"
                },
   link: function($scope, $elm, $attrs) {
    ........................................
    *//some logic to execute the function passed to ng-change*
    executeNgChangeFucntion(){
     ...........
     ...........
    };
    }]);

Способ 2

HTML:

<currency-input width="200px"  id="iextz" ng-model="currency1" ng-change="change(someFunctionWithArguments)" currency="$" decimals="2"></currency-input>

JS:

 numericApp.directive('currencyInput',........
       ...................................
       return {
                    restrict: 'E',
                    scope:{
                        ngModel : "=",
                        id : "@"
                    },
       link: function($scope, $elm, $attrs) {
        ........................................
        //ng-change handler
         $scope.change = function(someFunctionWithArguments){
             //execute someFuncitonWithArguments
               ..........................
           };
        }]);

Я не очень разбираюсь в продвинутых концепциях AngularJS, поэтому все, что я мог придумать, я изложил здесь. Было бы здорово, если бы кто-нибудь мог внести свой вклад. Заранее спасибо!

На самом деле я создаю компонент числового поля, который будет принимать числа и форматировать его в соответствии с установленной валютой, устанавливать десятичные цифры и т. Д., В любом случае важная часть состоит в том, что его может использовать кто-то другой (скажем, клиент). Люди могут использовать этот компонент в своих приложениях, и им нужно обрабатывать любой ввод, поступающий в поле, с помощью ng-change. У них есть свои обработчики событий. Это могло быть что угодно. Поэтому мне нужно предоставить способ, чтобы они могли передавать одну из своих функций для выполнения при каждом изменении ввода (как в случае с n-change). Например:

<decimal-input ng-model="employees.calculatedChangeAmounts[job.id][jobChangeReasonCodes[$index]].changeAmount" decimals="2" ng-change="recalculate.salaryAmount($index, job)"></decimal-input>

Я надеюсь, что это поможет развеять любые сомнения. Теперь, пожалуйста, помогите в решении моей, спасибо!

1
Rtr Snehil Singh 5 Май 2016 в 15:36

3 ответа

Лучший ответ

Если единственной целью вашей директивы является форматирование ввода, вам может быть лучше использовать одну из существующих маскированных директив ввода. Например: https://github.com/angular-ui/ui-mask. .

Если вы решили, что вам обязательно нужно создать новую директиву, вы, вероятно, захотите реализовать ее с помощью NgModelController. Это стандартный способ реализации полной поддержки двусторонней привязки и проверки в директиве. Помимо пользовательской привязки, ng-change работает напрямую с ng-model для получения уведомлений об изменениях.

Пользователь вашей директивы будет связываться с моделью в своей области действия с помощью ng-model, а затем обрабатывать измененное значение своей модели с помощью ng-change. Например:

<currency-input ng-model="item.currencyValue" ng-change="process(item.currencyValue)">
</currency-input>

(Не забудьте, что всегда ставьте точку в привязках ng-model.)

2
Community 23 Май 2017 в 12:16

Я не уверен, понял ли я первый метод, но второй кажется близким к тому, как ng-changed «следует» использовать.

Мой HTML

<p>My phone is {{phoneNumber}} !</p>
<p>Increment the phone number below:</p>
<input type="checkbox" ng-model="checkBoxData" ng-change="changeNumber(myShitVar)" />

Мой контроллер

app.controller('MainCtrl', ['$scope', function($scope) {
$scope.phoneNumber = 23323123;

$scope.changeNumber = function(myShitVar) {
if (!myShitVar) {
  $scope.phoneNumber++;
}
};

Если вы хотите добавить в функцию переменное количество аргументов, просто передайте их. Вы можете передать функции, сколько аргументов вы хотите, если некоторые значения не определены, они будут переданы как неопределенные.

Плункер ссылка

0
Tiago Bértolo 5 Май 2016 в 13:25

Если директива вводится, вы можете рассмотреть это (или ваш первый подход, определив someFunction(arg...) в вашем контроллере).

numericApp.directive('currencyInput',........
   ...................................
   return {
                restrict: 'E',
                scope:{
                    ngModel : "=",
                    id : "@"
                },
   link: function($scope, $elm, $attrs) 
{
    $elm.bind("change",function(evt){
        alert("Value changed");
    });  

    }]);
0
Bettimms 5 Май 2016 в 12:48