Обновите переменную области видимости из директивы (angularJS) - PullRequest
Новая
       11

Обновите переменную области видимости из директивы (angularJS)

0 голосов
/ 07 июня 2019

У меня есть директива, которую я хотел бы применить к нескольким элементам ввода, чтобы изменить их значение.Мне удалось применить его к значению входных элементов, но по какой-то причине это не отражается в области видимости.Я немного новичок в Angular и извиняюсь, если мне не хватает какого-то очевидного ответа.

http://jsfiddle.net/hmko75td/ JS Fiddle 

<div ng-app="myApp">

  <div ng-controller="MyCtrl">
    <select ng-model='Factor'>
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=5>5</option>
    </select>
    <br />
    <input convert-input ng-model="myNumber">
    {{myNumber}}
    <br />
    <input convert-input ng-model="myNumber2">
    {{myNumber2}}
    <br />
    <input convert-input ng-model="myNumber3">
    {{myNumber3}}
    <br />
  </div>

</div>

var app = angular.module('myApp',[]);

  app.controller('MyCtrl', function($scope) {
      $scope.myNumber = 1;
      $scope.myNumber2 = 2;
      $scope.myNumber3 = 3;

      $scope.Factor = 1;
    });

   app.directive("convertInput", function () {
        return {
            require: 'ngModel',
            restrict: "A",
            link: function (scope, element, attrs) {
                scope.$watch('Factor', function () {
                    if(scope.Factor){
                        element[0].value = scope.Factor * element[0].value;
                  }
                });
            }
       };
   });

Этот упрощенный пример показываетсуть моей проблемы.При изменении значения раскрывающегося списка он корректно обновляет значение элемента на странице, но это неправильно переводится обратно в переменную области действия.

Любые идеи, как сделать 1), сообщают директиве, какая переменная области действия требуетсяили 2) принудительно обновить модель на основе значения входных данных?

Спасибо!

1 Ответ

0 голосов
/ 07 июня 2019

Одно ограничение, которое я вижу с вашим фрагментом, заключается в том, что вам необходимо все использование вашей директивы convert-input для совместного использования Factor, которая существует в родительской области действия.

В таком случае, один жизнеспособный подходбудет использовать attrs, переданный в директиву, чтобы извлечь имя привязки ng-model, а затем обновить соответствующую привязку с помощью scope. 

scope[attrs.ngModel] *= scope.Factor;

Вот ответвление вашего JSFiddleдемонстрируя это: http://jsfiddle.net/m4hvre2y/

Другой подход к тому, чтобы директивы обновляли ng-model в родительской области, состоял бы в объявлении двусторонней привязки (например, scope: { ngModel: '='), но это не применимо в вашем случаеиз-за ограничений, о которых я упоминал выше.Если вы сделали это, изолированная область видимости означает, что вы потеряете доступ к Factor, если это не указано в директиве.

...