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

时间:2018-02-28 06:27:58

标签: javascript angularjs angular-ngmodel

我从指令的链接函数获取的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);
    }
  }
}

1 个答案:

答案 0 :(得分:1)

由于您将 require 属性指定为数组,因此angular会为您的链接函数提供一个数组。该数组将包含所请求的控制器。

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

  

require

     

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

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

(强调补充)