SyntaxError: Unexpected token { in directive angular js

Question

I am getting an error in accessing the scope variable in my html file {{model}}

In my html file

<div shipping-Detail-Directive type="billingAddress"> </div>

here is my requirement i want user to fill value in 'type' attribute and i have to access it in my ShippingDetailDirective.html file

I know that i am doing something wrong in accessing model of directive.

In my ShippingDetailDirective.html

<div class="order-content shipping-cost-confirm" ng-repeat="x in order">


            <div><span>Name</span><label>:</label><span>{{x.{{model}}.firstName}} {{x.{{model}}.lastName}}</span></div>
            <div><span>Company</span><label>:</label><span>{{x.{{model}}.companyName}}</span></div>
            <div><span>Address</span><label>:</label><span>{{x.{{model}}.address}}</span></div>
            <div><span>City</span><label>:</label><span>{{x.{{model}}.city}}</span></div>
            <div><span>State / Province</span><label>:</label><span>{{x.{{model}}.state}}</span></div>
            <div><span>Zip Code</span><label>:</label><span>{{x.{{model}}.zipCode}}</span></div>
            <div><span>Country</span><label>:</label><span>{{x.{{model}}.country}}</span></div>
            <div><span>Office Tel</span><label>:</label><span>{{x.{{model}}.officeTelephone}}</span></div>
            <div><span>Home Tel</span><label>:</label><span>{{x.{{model}}.homeTelephone}}</span></div>
            <div><span>Fax</span><label>:</label><span>{{x.{{model}}.fax}}</span></div>
            <div><span>Mobile Phone</span><label>:</label><span>{{x.{{model}}.mobileNo}}</span></div>
            <div><span>E-mail Address</span><label>:</label><span>{{x.{{model}}.email}}</span></div>
            <div class="edit-forgot float-r o-view-btn">
                <input type="button" ui-sref="app.Billing" value="EDIT ADDRESS" class="white-bg"></div>
</div>

and here is my directive

app.directive('shippingDetailDirective', function() {
     return{
       scope: {
         model: '='
       },
        templateUrl: 'templates/ShippingDetailDirective.html',
        controller: 'ShippingCtrl',
           link : function (scope, elem, attrs, controller) {
                scope.model = attrs.type;

            }
     }

});

So Can anyone please tell me that is there any other way to do this.

Chris Martin · Accepted Answer · 2015-07-21 08:21:08Z

1

I'm guessing you want to replace {{x.{{model}}.firstName}} with {{x[model].firstName}}, but we'd have to see your data to know.

answered Jul 21, 2015 at 8:21

Chris Martin

30.9k12 gold badges83 silver badges142 bronze badges

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

Comments

atinder · Accepted Answer · 2015-07-21 06:44:51Z

0

app.directive('shippingDetailDirective', function($parse) {
 return {
   scope: {
     model: '='
   },
   templateUrl: 'templates/ShippingDetailDirective.html',
   controller: 'ShippingCtrl',
   link: function (scope, elem, attrs, controller) {
     scope.model = $parse(attrs.type)(scope);
   }
 };
});

answered Jul 21, 2015 at 6:44

atinder

2,09014 silver badges15 bronze badges

Comments

Yashika Garg · Accepted Answer · 2015-07-21 07:36:30Z

0

I do not think you need to bind "model" in an isolated scope. All that is required is:

app.directive('shippingDetailDirective', function() { 
 return{
   scope: true,
   templateUrl: 'directive.html',
   controller: 'ShippingCtrl',
   link : function (scope, elem, attrs, controller) {
        scope.model = attrs.type;
    }
  }
});

Why are using {{x.{{model}}.firstName}}. {{model}} prints "billingAddress", so if you wnat to access property "billingAddress" of scope variable x then all you have to do is

{{x.model.firstName}}
You are getting this " Unexpected token {" error becaue you are using {{}} inside {{}}

answered Jul 21, 2015 at 7:36

Yashika Garg

2,3662 gold badges16 silver badges17 bronze badges

2 Comments

dj Bravo Over a year ago

I already use that things but then also it's not working and giving null value . Can You please tell me is there any other way to do this. Actually i am getting order values from ShippingCtrl controller.

Yashika Garg Over a year ago

What things are you using. What is the issue? See this plnkr if it helps you: plnkr.co/edit/i2WGkTlHQf6OIG50iPGt?p=preview

dj Bravo · Accepted Answer · 2015-07-21 10:08:43Z

0

By using {{x[model].firstName}} my program fetch data from server.

but the problem is that

<div shipping-Detail-Directive type="billingAddress"> </div>

<div shipping-Detail-Directive type="shippingAddress"> </div>

Both billingAddress and shippingAddress have same key value but different data but here the shippingAddress data get override the billingAddress data . Both showing same data because they both have same scope model. I can use if(attr.type== '') condition to difine different scope.variable according to its type attribute. But i does not want to do that. I want a different approach if it's possible

answered Jul 21, 2015 at 10:08

dj Bravo

1881 gold badge4 silver badges18 bronze badges

Collectives™ on Stack Overflow

SyntaxError: Unexpected token { in directive angular js

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related