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

Question

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

方法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变化的领域。它们有自己的事件处理程序。它可以是任何东西。因此，我需要提供一种方法，使他们可以在输入发生变化时传递要执行的函数之一（如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

如果指令的唯一目的是格式化输入，那么最好使用现有的屏蔽输入指令之一。例如：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绑定中始终有一个点。）

Answer 2

如果输入了指令，那么您可以考虑这一点（或者在控制器中定义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 3

我不确定我是否理解第一个方法，但第二个方法似乎接近于ng如何更改"应该"使用。

我的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链接