0
私はui-routerを使用してSPAを実装しようとしました。ui-router：移行テンプレートが表示されない
に$state.transitionTo関数を呼び出すng-clickハンドラ関数を実装しました。 URLが/expert/{expertId}/profileのテンプレートは、というui-viewに表示されています。
移行が良好です。私はURLが変わったのを見ることができた。 （/＃expert /＃expert/{expertId}）
テンプレートはui-viewに表示されませんでした。何が問題ですか ？
/* app.route.js */
\t
\t .state('experts', {
\t \t url : '/experts',
\t \t templateUrl : "expert/view",
\t \t controller : "ExpertController"
\t }).state('experts.profile', {
\t \t url : '/{expertId}'
\t \t , views : {
\t \t \t 'expertProfile' : function($stateParams){
\t \t \t \t return "expert/" + $stateParam.expertId + "/profile";
\t \t \t }
\t \t }
\t })
/* app.js */
\t app.controller('ExpertController', function($scope, $http, $sce, $state) {
\t \t $scope.$ctrl = this;
\t \t
\t \t $scope.tab = 'total';
\t \t
\t \t $scope.setTab = function (tabid){
\t \t \t $scope.tab = tabid;
\t \t } \t
\t \t $scope.isSelected = function (tabid) {
\t \t \t return $scope.tab === tabid;
\t \t }
\t \t
\t \t $scope.expertTalkList = "";
\t \t
\t \t this.viewExpertProfile = function (expert){
\t \t \t $state.transitionTo('experts.profile', {expertId : expert});
\t \t }
\t
});<!-- #/experts-->
<div class="sub_content">
\t <ul class="nav clearfix" id="expertTabs">
\t \t <li class="nav_active" tab-id="total" ng-class="{nav_active:isSelected('total')}" ng-click="setTab('total')">전체</li>
\t \t <li tab-id="live" ng-class="{nav_active:isSelected('live')}" ng-click="setTab('live')">방송</li>
\t \t <li tab-id="join" ng-class="{nav_active:isSelected('join')}" ng-click="setTab('join')">가입</li>
\t </ul>
\t <div class="scroll" id="expertTalkList">
\t \t <ul class="user_list expert_list list" ng-include="'expert/list'" ng-show="isSelected('total')">
\t \t </ul>
\t \t <ul class="user_list expert_list list" ng-include="'expert/list?sectionId=live'" ng-show="isSelected('live')">
\t \t </ul>
\t \t <ul class="user_list expert_list list" ng-include="'expert/list?sectionId=join'" ng-show="isSelected('join')">
\t \t </ul>
\t </div>
</div>
<div class="profile_wrap" id="profile-wrap" ui-view="expertProfile">
</div>
<!-- /experts/list -->
<c:forEach items="${result.list }" var="expert">
<!-- When clicked here, webpage transitons to #/experts/{expertId} but the template /expert/{expertId}/profile never shown up in ui-view -->
<li class="clearfix" expert-id="${expert.userId }" ng-click="$ctrl.viewExpertProfile(${expert.userId })">
\t <div class="circle_thumb "><img src="${expert.thumbUrl }" alt="expert_thumbs" onerror="this.src='img/thumb_default_01.png'"></div>
\t <div class="cont">
\t <div class="tit">${expert.title }</div>
\t <div class="sub_tit">${expert.content}</div>
\t <div class="update clearfix">
\t <span>업데이트:</span>
\t <!-- <span class="update_icons"><img src="img/icon_recommend.png" alt=""></span>
\t <span class="update_icons"><img src="img/icon_strategy.png" alt=""></span>
\t <span class="update_icons"><img src="img/icon_ars.png" alt=""></span> -->
\t <c:forEach items="${expert.recentlyUpdated}" var="updatedItem">
\t \t <span class="update_icons"><img src="img/icon_${updatedItem }.png" alt=""></span>
\t </c:forEach>
\t </div>
\t </div>
</li>
</c:forEach>
<!-- /expert/{expertId}/profile -->
<div class="profile_area">
\t <div class="wrap_size">
<div class="profile_img">
...
</div>