Angular在指令模板中使用ng-model with表达式

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

试试这个版本:

.directive('myDir', function() {
    return {
        restrict: 'EA',
        scope:    {
                    YYY: '=ngModel'
                  },
        require:  'ngModel',
        replace:  true,
        template: '<input ng-model="YYY" />'
    };
});

Answer 2

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

下面的解决方案在指令中创建一个隔离模型，指令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}}" />');
    };
});

<<p> Plunkr演示/strong>