2016-06-07 23 views
2

templateUrl 매개 변수를 .state 탭 정의에 다음과 비슷한 형식으로 전달할 수 있습니까? 내가 쓸 수있는 여러 다른 페이지를 가지고 표시 할 "HTML"페이지를 구문 분석하는 하나의 템플릿 내에서 중첩 NG-IFS의 무리를하지 않으 :이온 탭에서 templateUrl을 동적으로 설정하는 방법은 무엇입니까?

위 .STATE에서
.state('tab.menu', { 
     url: '/menu', 
     views: { 
     'tab-menu': { 
      templateUrl: 'templates/tab-menu.html', 
      controller: 'MenuCtrl' 
     } 
     } 
    }) 
.state('tab.menu-detail', { 
    url: '/menus/:menuID', 
    views: { 
     'tab-menu': { 
     templateUrl: function($stateParams,Menus) { 
      console.log("In function") ; 
      console.log("Template: " + Menus.get($stateParams.menuID).url) ; 
      return 'templates/' + Menus.get($stateParams.menuID).url ; 
     }, 
     controller: 'MenuSubCtrl' 
     } 
    } 
}) 

// controllers 
.controller('MenuCtrl', function($scope,Menus) { 
    $scope.menus = Menus.all() ; 
}) 

.controller('MenuSubCtrl', function($scope,$stateParams,Menus) { 
    $scope.menu = Menus.get($stateParams.menuID); 
}) 

// services 
.factory('Menus', function() { 
    var menus = [ 
    {name:"Account",url:"menu-account.html",menuID:0}, 
    {name:"Contact",url:"menu-contact.html",menuID:1}, 
    {name:"Help",url:"menu-help.html",menuID:2}, 
    {name:"Privacy",url:"menu-privacy.html",menuID:3}, 
    {name:"Rate App",url:"menu-rate.html",menuID:4}, 
    {name:"Report Bugs",url:"menu-bugs.html",menuID:5}, 
    {name:"Settings",url:"menu-settings.html",menuID:6} 
    ] ; 

    return { 
    all: function() { 
     return menus ; 
    }, 
    get: function(menu) { 
     for (var i = 0; i < menus.length; i++) { 
     if (menus[i].menuID === parseInt(menuID)) { 
      return menus[i]; 
     } 
     } 
     return null; 
    }, 
    } ; 
}) ; 

('탭을 선택합니다. menu-detail '... templuateUrl 함수가 실행되고 첫 번째 콘솔 로그 항목이 작동하고, 두 번째 콘솔은 아무것도 수행하지 않고, 메시지도 오류도없고, 아무 것도하지 않습니다. 그냥 멈 춥니 다.이 작업을 수행하기 위해 여러 번의 반복 작업을 시도했습니다. 위의 탭 페이지 링크 (하위 사용자 정의보기로 이동하기로되어 있음)를 클릭하면 아무 것도 표시되지 않습니다. 콘솔 메시지 없음, 오류 없음 ... 없음

+0

이 가능한가요? http://stackoverflow.com/questions/24727042/angularjs-ui-router-how-to-configure-dynamic-views – theaccordance

답변

1

수 있습니다. 템플릿 Url 함수를 할당하십시오. 나는 솔루션을 잘 근무 비슷한 시나리오를 직면했다. 이것을 확인하십시오 : link

+0

감사합니다. 나는 그것이 내가 찾고있는 것이라고 생각한다. 그러나이 예제에서 'urlattr'은 templateUrl 함수로 전달됩니다 - 여기서 정의되는 위치는 어디입니까? 'urlattr.name'을 (공장에서 정의 된) 'menu.url'로 대체했지만 렌더링 된 HTML에서는 'undefined'로 다시 돌아옵니다. – rolinger

+0

익명의 함수는 우리가 기대하는 것을 반환합니다. 해당 기능에 menu.url을 사용할 수 있는지 확인하십시오. –

+0

나는 menu.url에서 $ stateParams.url로 바뀌었고 여전히 작동하지 않습니다. "templateUrl : [ '$ stateParams', function ($ stateParams) {return 'templates /'+ $ stateParams.url;}]," – rolinger