CODEWITHSUNDEEP
angularjs
user1563700
user1563700

Reputation:

Angular using ng-model with expression in directive template

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

Upvotes: 11

Views: 11893

Answers (2)

malix
malix

Reputation: 3582

Try a version of this:

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

Upvotes: 6

charlietfl
charlietfl

Reputation: 171700

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

Upvotes: 1

Related Questions