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}}" />');

    };
});

<强> Plunkr Demo

Angular使用ng-model和指令模板中的表达式

2 个答案: