여러보기 및 변경 URL

Question

제 경우에는 더 나은 단어가 부족하여 "보기"가 3 개 있습니다. 세 번째보기에 표시되는 내용은 두 번째보기와 첫 번째보기에서 선택한 내용에 따라 다릅니다. 마찬가지로 두 번째보기에 표시된 하위 항목은 첫 번째보기에서 선택한 항목에 따라 다릅니다.

Select Topic | Select Subtopic | Display Content 
------------------------------------------------------ 
Vegetables | Apple   | The peach is a tasty 
FRUITS*  | Banana   | fruit that has a nice 
Meats  | PEACH*   | color, etc. 
Fish   |     | 

현재 사용자가 주제를 선택하면 하위 주제 목록을 가져와 표시합니다. 사용자가 하위 주제를 선택하면 내용을 가져와 표시합니다. 지금까지, 너무 좋아. URL로 이동하는 모든 권리 내용을 유발하도록 내가 작업이

example.com/index.html#/topic/subtopic 

:

만이 문제는 또한 사용자가 양식의 URL로 이동하여이 액세스 할 수있게하려면 적재되다. 그것은 문제가 아닙니다.

내 문제는 사용자가 새로운 주제 또는 하위 주제를 선택하면 URL을 변경하려고한다는 것입니다. 그러나 나는이 작업을 수행하려면 어떻게합니까. location.path를 사용하는 경우 발생하는 것으로 보인다 페이지 리로드 (?

Answer 1

정확히 달성하는 유일한 방법은 내가 아는 한, UI-라우터입니다 일으키지 않고.

ngrouter와

, 당신은 쿼리 문자열 매개 변수에 대한 PARAMS을 변경해야합니다, 그래서 것 같은 그런 다음

when('/myRoute', { templateUrl: ..., reloadOnSearch: false }) 

: 당신의 라우팅 설정에서 다음

example.com/index.html#/myRoute?topic=topic&subtopic=subtopic 

그리고 컨트롤러에서 라우트 ($ routeChangeSuccess)의 변경 사항을 수신하고 거기에서 쿼리 문자열을 가져옵니다.

Answer 2

윈도우의 location.path을 사용하지 말고 각도 라우팅 (또는 암시 적으로 #hash 변경)을 사용해야합니다. 이와 같은 전망을

:

<!-- Categories --> 
<script type="text/ng-template" id="partials/categories.tmpl.html"> 
    <h3>Select a food category:</h3> 
    <ul> 
     <li ng-repeat="category in categories"> 
      <a ng-href="#/{{category.path}}">{{category.label}}</a> 
     </li> 
    </ul> 
</script> 

<!-- Fruits --> 
<script type="text/ng-template" id="partials/fruits.tmpl.html"> 
    <h3>Select a fruit:</h3> 
    <ul> 
     <li ng-repeat="fruit in fruits"> 
      <a ng-href="#/fruits/{{fruit.path}}">{{fruit.label}}</a> 
     </li> 
    </ul> 
    <a ng-href="#/{{back}}">Back</a> 
</script> 

<!-- Meats ---> 
... 

<!-- Vegetables --> 
... 

<!-- Description --> 
<script type="text/ng-template" id="partials/description.tmpl.html"> 
    <h3>{{item}}</h3> 
    <p>{{description}}</p> 
    <a ng-href="#/{{back}}">Back</a> 
</script> 

적절한 컨트롤러 및 서비스와 같은 구성 :

function config($routeProvider) { 
    $routeProvider. 
     when('/', { 
      templateUrl: 'partials/categories.tmpl.html', 
      controller: 'categoriesCtrl' 
     }). 
     when('/fruits/:fruit?', { 
      templateUrl: function (params) { 
       return params.fruit ? 
         'partials/description.tmpl.html' : 
         'partials/fruits.tmpl.html'; 
      }, 
      controller: 'fruitsCtrl' 
     }). 
     when('/meats/:meat?', {...}). 
     when('/vegetables/:vegetable?', {...}). 
     otherwise({ 
      redirectTo: '/' 
     }); 
} 

당신은 당신이 원하는 것을 얻을 수 있습니다!

---

참조, 또한,이 short demo.