Javascript AngularJS-将ng模型绑定到一个变量，该变量的名称存储在另一个变量中_Javascript_Angularjs

Javascript AngularJS-将ng模型绑定到一个变量，该变量的名称存储在另一个变量中

javascript angularjs

Javascript AngularJS-将ng模型绑定到一个变量，该变量的名称存储在另一个变量中,javascript,angularjs,Javascript,Angularjs,我试图将输入字段的值绑定到变量。我事先不知道这个变量的名称；它存储在另一个变量中这是html： <body ng-controller="stageController"> <form name="myForm" novalidate=""> <input type="text" name="myText" ng-model="model" /> </form> </body> 我也做了一个。这不

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

这是html：

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

我也做了一个。

这不起作用，因为当前绑定在输入字段和

model

变量之间。相反，我会将输入字段绑定到变量，该变量的名称存储在

$scope.model

变量中（在本例中为

realModel

）

可能吗？怎么做？

我对Angularjs比较陌生。我知道您所要求的是可以在Javascript中使用Windows实现的。我不太清楚。我修改了代码，以实现一个几乎可能的解决方案：

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

试试：

是的，这是可能的。我不明白你为什么要这么做，但我可以教你怎么做。我无法启动小提琴，但我复制到了plnkr：

您可以创建一个指令，使用$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模型更改为ng绑定模型，新指令）

我试图在

ng repeat

中使用前面的答案，但没有成功。它使用

compile

函数，这意味着使用最后传入值的所有指令。如果您使用链接功能，它似乎能按预期工作，即

指令（'ngBindModel'，函数（$compile）{ 返回{ 链接：功能（范围、元素、属性）{ 元素[0]。removeAttribute（'ng-bind-model'）；元素[0]。setAttribute（'ng-model'，scope.$eval（attr.ngBindModel））； $compile（元素[0]）（范围）； } }; })

一个更简单的替代方案-如果可以稍微更改模型-HTML：

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

用户2273266给出的（目前获胜的）答案实际上有点不正确。如果只使用一次该指令，它将起作用，但实际上它会混淆模板元素和实例元素对象，并将在循环中呈现的所有元素上找到的姓氏

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

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

还更改了保留的“ng”前缀。

此处缺少的是ng app指令，不需要对ng模型使用显式指令

这项工作：

<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>


var-app=angular.module（'myApp'，[]）；
app.controller（'stageController'，函数（$scope）{
$scope.model='realModel'；
$scope.realModel='字段的初始值'；
})

这不适合我的情况，因为您假设我知道要绑定到字段的变量是model.value。。。相反，我不知道变量的名称。。。我只知道它的名称存储在model.var中（参考您的代码）。创建名为ngXxx的指令是一种不好的做法（“不要在您自己的指令前面加上ng，否则它们可能会与Angular的未来版本中包含的指令冲突”）。这意味着您的所有变量都需要在

vars

中，如果尝试像以下函数一样使用stageControl（$scope）{$scope.model='realModel.innerRealModel'；$scope.vars={}；//变量容器$scope.vars.realModel={}；$scope.vars.realModel.innerRealModel='字段的初始值'；}

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

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

<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>