無法在angularjs中正確呈現指令模板？

Question

這裏是指令

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()正常工作，使我相信設置控制器沒有問題。我究竟在哪裏出錯？

Answer 1

你必須改變你的事業scope: {index: '@'}, @意味着它是string ..所以嘗試使用：

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