Я хочу, чтобы моя директива поддерживала события 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>
Я надеюсь, что это поможет развеять любые сомнения. Теперь, пожалуйста, помогите в решении моей, спасибо!
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
.)
Я не уверен, понял ли я первый метод, но второй кажется близким к тому, как 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++;
}
};
Если вы хотите добавить в функцию переменное количество аргументов, просто передайте их. Вы можете передать функции, сколько аргументов вы хотите, если некоторые значения не определены, они будут переданы как неопределенные.
Если директива вводится, вы можете рассмотреть это (или ваш первый подход, определив someFunction(arg...)
в вашем контроллере).
numericApp.directive('currencyInput',........
...................................
return {
restrict: 'E',
scope:{
ngModel : "=",
id : "@"
},
link: function($scope, $elm, $attrs)
{
$elm.bind("change",function(evt){
alert("Value changed");
});
}]);
Похожие вопросы
Связанные вопросы
Новые вопросы
angularjs
Используйте для вопросов об AngularJS (1.x), JavaScript-фреймворке с открытым исходным кодом. НЕ используйте этот тег для Angular 2 или более поздних версий; вместо этого используйте тег [angular].