无法在angularjs中正确呈现指令模板?

时间:2017-02-28 12:00:52

标签: javascript angularjs

这是指令

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

控制器代码

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

和模板

.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

问题是变量未在模板中呈现。我测试了它是否使用console.log正确传递,我得到了适当的响应。函数loadDetails()也正常工作,让我相信设置控制器没有问题。我到底哪里错了?

1 个答案:

答案 0 :(得分:1)

您必须更改scope: {index: '@'},原因@表示它是string ..所以请尝试:

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