2014-09-08 2 views
0

상황을 설명하는 'plunker'이 있습니다. 그래프, 필드, 모달 및 구성 :모달 대화 상자에서 각도 JS ui-router의 상태

  1. 메인 페이지 (home.html을)은 네 < UI 뷰의 >들로 구성되어 있습니다.
  2. 그래프 < ui-view >은 그래프 섹션입니다.
  3. 필드 < ui-view >은 사용자가 클릭하는 링크에 따라 필드 (fields.html 및 fields2.html)를 표시합니다.
  4. 모달 < ui-view >은 모달 대화 상자를 표시합니다.
  5. 구성 < ui-view >은 대화 상자에 설정할 설정 목록을 표시합니다.

내가되고 직면하고 문제 - 어떻게 그녀가 대화 상자를 열 수있는 구성의 링크를 클릭하기 전에 사용자가 떠난 < UI 뷰 > 필드의 상태를 유지하기 위해?

EDIT : 또한 대화 링크를 클릭하면 대화 상자에 설정 (settings1.html, settings2.html, settings3.html) 페이지를 표시 할 수 없습니다.

angular.module("myApp") 
    .config(["$stateProvider", function($stateProvider) { 
     $stateProvider 
      .state("home", { 
       url: "/", 
       templateUrl: "home.html" 
      }) 
      .state("home.dashboard", { 
       views: { 
        "graph": { 
         templateUrl: "graph.html" 
        }, 
        "fields": { 
         templateUrl: "fields.html" 
        } 
       } 
      }) 
      .state("home.moreFields", { 
       views: { 
        "graph": { 
         templateUrl: "graph.html" 
        }, 
        "fields": { 
         templateUrl: "fields2.html" 
        } 
       } 
      }) 
      .state("home.configure", { 
       views: { 
        "graph": { 
         templateUrl: "graph.html" 
        }, 
        "fields": { 
         // The templateUrl might be 'fields1.html' or 'fields2.html' depending upon link the user clicked at the time when the dialog is opened. 
        }, 
        "modal": { 
         templateUrl: "configure.html" 
        } 
       } 
      }) 
     .state("home.configure.settings1", { 
      views: { 
       "graph": {}, 
       "fields": {}, 
       "configure": { 
        templateUrl: "settings1.html" 
      }   
      } 
     }) 
     .state("home.configure.settings2", { 
      views: { 
       "configure": { 
        templateUrl: "settings2.html" 
       } 
      } 
     }) 
    .state("home.configure.settings3", { 
     views: { 
      "configure": { 
       templateUrl: "settings3.html" 
      } 
     } 
     }); 
    }]); 

답변

0

은 UI-라우터 엑스트라에서 봐, 그리고 특히 Sticky States 당신의 상태와 범위를 유지하기 위해 : 여기 routes.js에 대한 코드입니다. 내가 이해하는 바에 따르면, 그것은 당신의 요구 사항을 완벽하게 만족시킵니다. 당신의 home.configure 상태 필드

공식 UIRouter wiki

"fields": { 
    templateUrl: function ($stateParams){ 
    return '/partials/field.' + $stateParams.clickedFieldNumber + '.html'; 
    } 
} 
에 설명 된대로 당신에게 적절한 템플릿을 반환하는 함수를 사용할 수있는 템플릿
관련 문제