Unable to render directive template properly in angularjs?

Question

Here is the directive

module.exports = ()=>{
  return {
    restrict: 'E',
    templateUrl: "/components/event/event.html",
    scope: {index: '@'},
    controller: "eventCtrl"
  };
};

The code for controller

module.exports = ($scope)=>{
  console.log($scope.index);
  $scope.loadDetails = ()=>{
    console.log("hello there");
  }
};

and for template

.event
  h3(ng-bind="index.title")
  p(ng-bind="index.description")
  .price(ng-show="index.is_paid") {{cost}} $
  a.button-primary(ng-click="loadDetails()") Details

The problem is the variables are not being rendered in the template. I tested if it is being passed correctly using console.log and i am getting proper response. Also the function loadDetails() is working properly leading me to believe that there is not problem with setting up the controller. Where exactly am i going wrong ?

@federicoscamuzzi okay now i think i am getting somewhere, i can't reference field inside index. I think you are right about the string thing, what should i use instead ? — georoot
– georoot, Commented Feb 28, 2017 at 12:17

federico scamuzzi · Accepted Answer · 2017-02-28 12:27:29Z

1

You have to change your scope: {index: '@'}, cause @ mean it is for string ..so try with :

module.exports = ()=>{
  return {
    restrict: 'E',
    templateUrl: "/components/event/event.html",
    scope: {index: '='},
    controller: "eventCtrl"
  };
};

answered Feb 28, 2017 at 12:27

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Unable to render directive template properly in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related