Как изменить значение области ng-модели в пользовательской угловой директиве?

Question

Существует следующий код пользовательской директивы:

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); 
}; 

Как вы можете видеть, что мой заказ директива «нг-модель» атрибут с именем переменной «мастерства». Как изменить значение «умение» в моей настраиваемой директиве? Мой способ не работает. Заранее спасибо!

Answer 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]; 
     } 
    }); 
} 

также кажется, что вы пропустили пространство между ними, чтобы отделить ng-model атрибут в вашем HTML

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

Смотрите документацию here

Answer 2

При использовании require: 'ngModel' , 4-й параметр, переданный вашей функции 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] 
    } 
    }); 
}