Angular using ng-model with expression in directive template

Question

I want to use the ng-model attribute in a custom element. The problem is, that I need to set the ng-model with an expression:

ng-model="{{anyVariable}}"

The problem is, that I always get an error as soon I add the expression to the ng-model attribute in my template:

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)

The code used:

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

malix · Accepted Answer · 2015-04-08 07:25:09Z

6

Try a version of this:

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

edited Apr 8, 2015 at 7:25

answered Jul 1, 2013 at 21:32

malix

3,5921 gold badge33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1563700 Over a year ago

Angular 1.0.8 does not accept a function as template: Template must have exactly one root element. was: function render(element, attrs) {return '<input ng-model="YYY" />';}

charlietfl · Accepted Answer · 2013-03-24 14:45:29Z

1

I couldn't find a way to pass an expression to ng-model within the directive template.

Following solution creates an isolated model within the directive and directive controller dynamically creates the property name in main controller model object and watches the isolated model to pass updates to main model:

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

answered Mar 24, 2013 at 14:45

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

charlietfl Over a year ago

Here's another version that uses ng-repeat and only attribute required in html is for passing in the object for the element from main controller plnkr.co/edit/kcxFA7lrnlMoScrHYlAC?p=preview

Collectives™ on Stack Overflow

Angular using ng-model with expression in directive template

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related