angularjs - Angular 在指令模板中使用带有表达式的 ng-model

Question

我想在自定义元素中使用 ng-model 属性。问题是，我需要用表达式设置 ng-model:

ng-model="{{anyVariable}}"

问题是，一旦我将表达式添加到模板中的 ng-model 属性中，我总是会收到错误消息:

Error: Syntax Error: Token 'x.name' is unexpected, expecting [:] at column 3 of the expression [{{x.name}}] starting at [x.name}}].
    at Error (<anonymous>)
    at throwError (http://localhost:9000/public/javascripts/angular.js:5999:11)
    at consume (http://localhost:9000/public/javascripts/angular.js:6037:7)
    at object (http://localhost:9000/public/javascripts/angular.js:6327:9)
    at primary (http://localhost:9000/public/javascripts/angular.js:6211:17)
    at unary (http://localhost:9000/public/javascripts/angular.js:6198:14)
    at multiplicative (http://localhost:9000/public/javascripts/angular.js:6181:16)
    at additive (http://localhost:9000/public/javascripts/angular.js:6172:16)
    at relational (http://localhost:9000/public/javascripts/angular.js:6163:16)
    at equality (http://localhost:9000/public/javascripts/angular.js:6154:16) 

使用的代码:

function addFormFieldDirective(elementName, template) {
    app.directive(elementName, function() {
        return {
            restrict: "E",
            scope: {},
            replace: true,
                              // adds some extra layout
            template: buildFormTemplate(template),
            link: function(scope, elm, attrs) {
                scope.x = attrs;
            }
         };
    });
}
addFormFieldDirective("textfield", '<input id="{{x.id}}" ng-model="{{x.name}}" type="text" name="{{x.name}}" value="{{x.value}}" />');

Answer 1

我找不到将表达式传递给 ng-model 的方法在指令模板中。

以下解决方案在指令和指令 controller 中创建了一个隔离模型在主 Controller 模型对象中动态创建属性名称并观察隔离模型以将更新传递给主模型:

app.directive("textfield", function() {
    return {
        restrict: "E",
        scope: {},
        replace: true,
        controller:function($scope,$attrs)  {
            $scope.x=$attrs;

            $scope.$watch('directiveModel',function(){
                $scope.$parent.myModel[$attrs.name]=$scope.directiveModel;
            }) ;

            $scope.directiveModel=$attrs.value;
        },
        template: buildFormTemplate('<input ng-model="directiveModel" id="{{x.id}}" type="text" name="{{x.name}}" value="{{x.value}}" />');

    };
});

Plunkr Demo