如何更改自定义 Angular 指令中的 ng-model 范围值？答案

【问题标题】：How to change ng-model scope value in custom Angular directive?如何更改自定义 Angular 指令中的 ng-model 范围值？
【发布时间】：2015-09-24 05:44:24
【问题描述】：

自定义指令代码如下：

 angular.module('app.directives', ['ng']).directive('liveSearch', [
    '$compile', '$timeout', function($compile, $timeout) {
      return {
        restrict: 'E',
        replace: true,
        require: 'ngModel',
        scope: {
          ngModel: '=',
          liveSearchCallback: '=',
          liveSearchSelect: '=?',
          liveSearchItemTemplate: '@',
          liveSearchWaitTimeout: '=?',
          liveSearchMaxResultSize: '=?',
          liveSearchResultField: '=?'
        },
        template: "<input type='text' />",
        link: function(scope, element, attrs, controller) {
          scope.$watch('selectedIndex', function(newValue, oldValue) {
            var item;
            item = scope.results[newValue];
            if (item) {
              scope.ngModel = '10';
              element.val(item[attrs.liveSearchResultField]
            }
          });
        }
}}]);

这不是我的指令的完整代码，但足以理解问题。另请查看代码：

   <live-search class="form-control" id="search1" live-search-callback="mySearchCallback" live-search-result-field="title"ng-model="skill" type="text"></live-search>
   Value: {{ skill }}
   <button class="btn btn-success" type="submit" ng-click="createEmployee">Сохранить</button>

我的控制器代码：

$scope.createEmployee = function() {
        console.log($scope.skill);
};

如您所见，我的自定义指令具有名为“skill”的变量名称的“ng-model”属性。如何更改自定义指令中的“技能”值？我的方法行不通。提前致谢！

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

在您的link: 中尝试使用

link:function(scope, element, attrs, ngModel){
    scope.$watch('selectedIndex', function(newValue, oldValue) {
       var item;
       item = scope.results[newValue];
       if (item) {
         ngModel.$setViewValue(10);
         ngModel.$render() // will update the input value as well
         element.val(item[attrs.liveSearchResultField];
       }
    });
}

您似乎也错过了 HTML 中分隔 ng-model 属性的空格

<live-search class="form-control" id="search1" live-search-callback="mySearchCallback" live-search-result-field="title" ng-model="skill" type="text"></live-search>

查看文档here

【讨论】：

啊，你的答案比我快！不过请注意，您忘记包含 $scope.watch 部分，因为 newValue 在您的代码块中未定义。
请告诉我：我看到了变化，但是 console.log($scope.skill) 没有被表单点击定义。为什么？
你在哪里绑定了点击功能？
在我的控制器中，而不是在指令中
我的意思是您绑定了点击功能的元素，以及您尝试访问的控制器。如果可能，创建一个小提琴？

【解决方案2】：

当您使用require: 'ngModel' 时，传递给link 函数的第四个参数是ngModelController。使用方法$setViewValue 更新传递给您的指令的ngModel 的值，如果您的视图也需要更新，则调用$render()。

link: function(scope, element, attrs, ngModelController) {
  scope.$watch('selectedIndex', function(newValue, oldValue) {
    var item;
    item = scope.results[newValue];
    if (item) {
      ngModelController.$setViewValue(10);
      ngModelController.$render();
      element.val(item[attrs.liveSearchResultField]
    }
  });
}

【讨论】：

请告诉我：我看到了变化，但是 console.log($scope.skill) 没有被表单点击定义。为什么？