将动态侦听器传递给 ng-change

Question

我希望我的指令支持 ng-change 事件，而不是定义触发 ng-change 时调用的特定函数，我想让 ng-change 接受任何类型的具有单个或多个参数的函数，并且执行它。我可以想到两种方法，但不知道哪种方法正确或哪种方法有效。它是这样的：

方法一：

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(){
     ...........
     ...........
    };
    }]);

方法二

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>

我希望这有助于消除任何疑问。现在请帮忙解决我的问题，谢谢！

Answer 1

如果指令被输入，那么你可以考虑这个（或者你的第一种方法，在你的控制器中定义someFunction(arg...)）。

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

    }]);

Answer 2

我不确定我是否理解第一种方法，但第二种方法似乎接近如何使用 ng-changed "should"。

我的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++;
}
};

如果您想向函数添加可变数量的参数，只需传递它们即可。您可以将您想要的参数传递给一个函数，如果某些值未定义，它们将作为未定义传递。

Plunker link

Answer 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 绑定中 always have a dot。）

将动态侦听器传递给 ng-change

Pass a dynamic listener to ng-change

angularjs

dynamic

angularjs-ng-change