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绑定的名称，然后通过{{1}更新相应的绑定}。

scope

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

让指令在父范围内更新scope[attrs.ngModel] *= scope.Factor;的另一种方法是声明双向绑定（例如ng-model），但是由于约束I，它不适用于您的情况上文提到的。如果这样做，那么孤立的作用域意味着您将无法访问scope: { ngModel: '='，除非它专门传递给指令。

从指令（angularJS）更新范围变量

1 个答案: