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.

Answer 1

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

Answer 2

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

Answer 3

1. 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;
       }
     }
   });
   

2. 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}}

3. You are getting this " Unexpected token {" error becaue you are using {{}} inside {{}}

Answer 4

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);
   }
 };
});