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 将为您的 link 函数提供一个数组。该数组将包含请求的控制器。

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

require

Require another directive and inject its controller as the fourth argument to the linking function. The require property can be a string, an array or an object:

a string containing the name of the directive to pass to the linking function

an array containing the names of directives to pass to the linking function. The argument passed to the linking function will be an array of controllers in the same order as the names in the require property

an object whose property values are the names of the directives to pass to the linking function. The argument passed to the linking function will also be an object with matching keys, whose values will hold the corresponding controllers.

（强调）

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

ngModel.$setViewValue is not a function when trying to set model value

javascript

angularjs

angular-ngmodel