从指令更新范围变量 (angularJS)

Question

我有一个指令要应用于多个输入元素以更改它们的值。我已经成功地将它应用于输入元素值，但由于某种原因没有反映在范围中。我是 Angular 的新手，如果我遗漏了一些明显的答案，我深表歉意。

<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) 强制模型根据输入值更新有什么想法吗？

谢谢！

Answer 1

我在您的代码片段中看到的一个限制是您需要使用 convert-input 指令来共享 Factor，它存在于封闭的父范围中。

在这种情况下，一种可行的方法是使用传递到指令中的 attrs 来提取 ng-model 绑定的名称，然后通过 [= 更新相应的绑定15=].

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

这是您的 JSFiddle 的一个分支，演示了这一点： http://jsfiddle.net/m4hvre2y/

让指令在父范围内更新 ng-model 的另一种方法是声明 two-way 绑定（例如 scope: { ngModel: '='），但它不适用于您的情况，因为到我上面提到的约束。如果你这样做，隔离范围意味着你无法访问 Factor 除非它被明确传递到指令中。

从指令更新范围变量 (angularJS)

Update a scope variable from a directive (angularJS)

angularjs

angularjs-directive