14

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

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

我还做了一个小提琴。

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

可能吗？如何？

4

6 回答 6

19

是的，有可能。我不明白你为什么要这样做，但我可以告诉你如何去做。我无法启动小提琴，但我复制到了 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"  />
于 2013-04-12T07:33:57.487 回答
13

一个更简单的替代方案 - 只要可以稍微更改模型 - 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';
}
于 2014-02-11T17:07:25.873 回答
9

我尝试在里面使用以前的答案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);
        }
      };
    })
于 2013-12-03T21:20:05.660 回答
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”前缀。

于 2014-11-18T22:22:52.110 回答
0

我对 Angularjs 比较陌生。我知道您在使用窗口的 Javascript 中可以实现您的要求。我不确定 Angular。我已经修改了代码以实现几乎可能的解决方案：

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

试试小提琴：

于 2013-04-12T06:36:12.803 回答
-2

您在这里缺少的是 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>
于 2015-06-11T18:34:12.040 回答