Question

我正在尝试将输入字段的值绑定到变量。我不知道这个变量的名称先验;它存储在另一个变量中。

这是html：

<body ng-controller="stageController">
    <form name="myForm" novalidate="">
        <input type="text" name="myText" ng-model="model" />
    </form>
</body>

这是控制器：

function stageController($scope) {
    $scope.model = 'realModel'; // contains the name of the variable that i would bind to the field 
    $scope.realModel = 'initial value of the field';
}

我还制作了fiddle。

这不起作用，因为当前绑定位于输入字段和model变量之间。相反，我会将输入字段绑定到名称存储在$scope.model变量中的变量（在本例中为realModel）。

有可能吗？怎么样？

Answer 1

是的，它可能。我不明白你为什么要这样做，但我可以告诉你如何做。我无法开始小提琴，但我复制到了一个plnkr：http://plnkr.co/edit/o1gFf1lMq4Pg5iVoVyUN?p=preview

您创建了一个指令，使用$ compile将原始模板转换为新模板。新指令：

directive('ngBindModel',function($compile){
    return{
        compile:function(tEl,tAtr){
          tEl[0].removeAttribute('ng-bind-model')
            return function(scope){
              tEl[0].setAttribute('ng-model',scope.$eval(tAtr.ngBindModel))
              $compile(tEl[0])(scope)
                console.info('new compiled element:',tEl[0])
            }
        }
    }
})

更新了html（从ng-model更改为ng-bind-model，新指令）

<input type="text" name="myText" ng-bind-model="model"  />

Answer 2

更简单的替代方案 - 前提是可以稍微更改模型 - HTML：

<body ng-controller="stageController">
    <form name="myForm" novalidate="">
        <input type="text" name="myText" ng-model="vars[model]" />
    </form>
</body>

型号：

function stageController($scope) {
    $scope.model = 'realModel'; // contains the name of the variable that i would bind   to the field 
    $scope.vars = {};    // variables container
    $scope.vars.realModel = 'initial value of the field';
}

Answer 3

我尝试使用ng-repeat中的上一个答案，但它没有用。它使用compile函数，这意味着所有指令都使用了最后传入的值。如果使用链接功能，它似乎按预期工作，即

.directive('ngBindModel',function($compile){
      return{
        link:function(scope,element,attr){
          element[0].removeAttribute('ng-bind-model');
          element[0].setAttribute('ng-model',scope.$eval(attr.ngBindModel));
          $compile(element[0])(scope);
        }
      };
    })

Answer 4

user2273266的（当前获胜的）回答实际上是错误的。虽然它只能使用一次指令，但它实际上会混淆模板元素和实例元素对象，并且会将它找到的姓氏放在它在循环中呈现的所有元素上。例如。

directive('custBindModel',function($compile){
    return{
        compile:function(tEl){
            tEl[0].removeAttribute('cust-bind-model');
            return function(scope, iEl, iAtr){
                iEl[0].setAttribute('ng-model',scope.$eval(iAtr.custBindModel));
                $compile(iEl[0])(scope);
                console.info('new compiled element:',tEl[0]);
            }
        }
    }
})

此版本通过分离模板和实例上的操作来纠正问题，因此后链接调用仅修改实例而不是模板。

还更改了保留的'ng'前缀。

Answer 5

我对Angularjs相对较新。我知道你在Javascript使用窗口可能要求的是什么。我不确定Angular。我修改了代码以实现近乎可能的解决方案：

 $scope.model = {'var':'realModel','value':'initial value of the field'};

试试fiddle：

Answer 6

这里缺少的是ng-app指令，不需要为ng-model使用显式指令。

这有效：

<body ng-app="myApp" ng-controller="stageController">
    <form name="myForm" novalidate="">
        <input type="text" name="myText" ng-model="realModel" />
    </form>
<script>
var app = angular.module('myApp', []);
app.controller('stageController', function($scope) {
    $scope.model = 'realModel'; 
    $scope.realModel = 'initial value of the field';
})
</script>
</body>

AngularJS - 将ng-model绑定到一个名称存储在另一个变量中的变量

6 个答案: