ngModel。$ setViewValue在尝试设置模型值时不是函数

Question

我从我的指令的link函数得到的ngModel是一个集合而不是ngModel的一个实例。当然，当我尝试调用ngModel.$setViewValue('bill')时，我的程序会抛出一个错误，ngModel.$setViewValue is not a function。

如果我更改我的changeName函数来解决数组的第一个元素，它可以正常工作。在这种情况下，为什么ngModel作为集合出现？元素的顺序是指什么？我该如何解决？

$scope.changeName = function(){
    ngModel[0].$setViewValue('bill');
    console.log(ngModel);
}

CodePen example

angular.module('app', []);

angular.module('app')
  .controller('MainController', function($scope) {
    $scope.name = "Greg"
  });

angular.module('app').directive('multiselectDropdown', multiSelectDropDown);

function multiSelectDropDown($window, $rootScope) {
  return {
    scope: {
      ngModel: '=',
    },
    require: ['?ngModel'],
    restrict: 'E',
    template: '<div>hi, {{ngModel}}<br><br><button ng-click="changeName()">Change name to bill.</button><br><br></div>',
    replace: true,
    link: linkFn
  };

  function linkFn($scope, iElement, iAttrs, ngModel) {
    $scope.changeName = function() {
      ngModel.$setViewValue('bill');
      console.log(ngModel);
    }
  }
}

Answer 1

因为您将require属性指定为数组，所以angular将为您的链接函数提供一个数组作为结果。该阵列将包含所请求的控制器。

如果您只需要ngModel控制器，则可以将其作为字符串传递给require。否则，您需要在给予链接函数的数组中引用它。

require

需要另一个指令并将其控制器作为链接函数的第四个参数注入。 require属性可以是字符串，数组或对象：

• 包含要传递给链接函数的指令名称的字符串
• 包含要传递给链接函数的指令名称的数组。传递给链接函数的参数将是一个控制器数组，其顺序与require属性中的名称相同
• 一个对象，其属性值是要传递给链接函数的指令的名称。传递给链接函数的参数也将是一个具有匹配键的对象，其值将包含相应的控制器。

（重点补充）