javascript - 如何修复从 ng-change 上的函数传递的意外参数用于选择列表？

Question

http://plnkr.co/edit/fFSoLmPFDBfNc2oOczZr?p=preview

指令代码

.directive('inputSelect', function() {
        return {
          templateUrl: 'someTemplate.html',
          restrict: 'E',
          scope: {
            ngModel: '=',
            ngChange: '&',
            options: '='
          }
        };
      })

Controller 代码

  $scope.someFunction = function(name) {
            console.log(name)
          };
  $scope.colors = [{
        name: 'black',
        shade: 'dark'
      }, {
        name: 'white',
        shade: 'light',
        notAnOption: true
      }, {
        name: 'red',
        shade: 'dark'
      }];

模板代码

<select ng-model="ngModel" ng-change="ngChange()" 
  ng-options="option.name for option in options">
</select>

指令使用代码

<input-select ng-model="someModel" ng-change="someFunction(someModel.name)" options="colors"></input-select>

因此，传递给 someFunction() 的参数是 undefined 或者它包含正确的值，行为是意外和随机的。

Answer 1

您的模板应该通过传递 JSON 格式的参数来调用方法，例如 ng-change="ngChange({someModel: ngModel})" from directive

确保从指令调用函数时你应该传递参数，键应该是函数参数名称，因为这里是 someModel 然后传递值，就像这里的 ngModel

标记

<input-select ng-model="someModel" ng-change="someFunction(someModel)" options="colors"></input-select>

指令模板

<select ng-model="ngModel" ng-change="ngChange({someModel: ngModel})" 
  ng-options="option.name for option in options">
</select>

Working Plunkr