Error while using angular JS directives

Question

I am new to angular JS and trying to use Directives.

Below is the code for directive :

app.directive('appInfo', function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'js/directives/appInfo.html' 
  }; 
});

Below is my main JS:

app.controller('MainController', ['$scope', function($scope) {
    $scope.apps = [
      {
        icon: 'img/move.jpg',
        title: 'MOVE',
        developer: 'MOVE, Inc.',
        price: 0.99,
        info: "move"
      }
    ]
}]);

Now, when i am trying to use this in html i am getting very bad error that ia ma unable to under stand :

<div class="card" ng-repeat = "app in apps">
    <app-info info="{{ app.info }}"></app-info>
 </div>

getting very bad error that ia ma unable to under stand ........... what error? — Jai
– Jai, Commented Feb 23, 2016 at 10:56
Error: [$parse:syntax] http://errors.angularjs.org/1.3.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7B%20app.info%20%7D%7D&p4=%7B%20app.info%20%7D%7D — Rahul Munjal
– Rahul Munjal, Commented Feb 24, 2016 at 5:28

ashfaq.p · Accepted Answer · 2016-02-23 11:00:20Z

1

While passing data to angular directive, you don't need to use interpolation, pass the data directly like this:

<div class="card" ng-repeat = "app in apps">
  <app-info info="app.info"></app-info>
</div>

Hope it helps.

answered Feb 23, 2016 at 11:00

ashfaq.p

5,49723 silver badges36 bronze badges

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

1 Comment

Rahul Munjal Over a year ago

This resolved the error but i am not able to see the app-info directive UI that is present in html file linked.

Hardik Gondalia · Accepted Answer · 2016-02-23 11:01:12Z

1

You don't need to pass {{}} in ng-repeat.

 <app-info info="app.info"></app-info>

answered Feb 23, 2016 at 11:01

Hardik Gondalia

3,7276 gold badges38 silver badges86 bronze badges

1 Comment

Rahul Munjal Over a year ago

This resolved the error but i am not able to see the app-info directive UI that is present in html file linked.

Collectives™ on Stack Overflow

Error while using angular JS directives

2 Answers 2

1 Comment

1 Comment

Your Answer

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

Related