자식 상태가 변경 될 때 컨트롤러 다시로드 - 각도 UI 라우터

각도 UI 라우터를 처음 사용하고 중첩 된보기로 응용 프로그램을 만들려고합니다.자식 상태가 변경 될 때 컨트롤러 다시로드 - 각도 UI 라우터

나는 '헤더'상태와 '내용'상태를 호스팅하는 index.html을 가지고 있습니다. 콘텐츠 상태 내에서 전역 뷰와 하위 뷰를 나타내는 두 개의 탐색 막대가 있습니다. 사용자가 응용 프로그램을 열면 기본적으로 전역보기가 열립니다.

그러나 현재 응용 프로그램을 실행할 때마다 전역보기와 하위보기 컨트롤러가 함께 실행됩니다 (두보기가 함께로드 됨).

필자가 원하는 것은 전역 컨트롤러 만 먼저 실행되어야하고 사용자가 하위보기를 클릭하면 해당 컨트롤러가 실행되어야한다는 것입니다. 이렇게하면 사용자가 두보기를 전환 할 때마다 컨트롤러가 다시로드됩니다.

Google을 통해 읽었으며 여기에서 필요한 솔루션을 찾을 수 없습니다. ui-router를 사용하여 이것이 가능한지 알려주십시오. 감사.

index.html을

<html>  
<body> 

<div class="fluid-container"> 
    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
</div> 

</body> 
</html>

content.html

<div class="row" style="background-color: #F9F9F8"> 
    <div class="col-md-3"></div> 

    <div class="col-md-6"> 
     <ul class="nav nav-pills nav-justified"> 
      <li class="active"><a data-toggle="pill" href="#globalView">Global</a></li> 
      <li><a data-toggle="pill" href="#subView">Sub View</a></li> 
     </ul> 
    </div> 

    <div class="col-md-3"></div> 
</div> 

<div class="row">  
    <br> 
    <hr></hr> 
    <div class="tab-content"> 
     <div id="globalView" class="tab-pane fade in active" ui-view="globalView"></div> 
     <div id="subAccountView" class="tab-pane fade" ui-view="subView"></div> 
    </div> 

</div>

내가 쉽고 신속을 발견

$urlRouterProvider.otherwise("/firstPage"); 
    $urlRouterProvider.when('', '/firstPage'); 
    $stateProvider 
     .state('home', { 
      url: '', 
      views: { 
       /** Find the views named in index.html and inject the named views**/ 
       'header': { 
        templateUrl: 'views/header.html', 
        controller: 'headerController', 
        controllerAs: 'headerCtrl' 
       }, 
       'content': { 
        templateUrl: 'views/content.html', 
        controller: 'contentController', 
        controllerAs: 'contentCtrl',       
       } 
      } 
     }) 
     .state('home.summary', { 
      url: '/firstPage', 
      views: { 
       'globalView': { 
        templateUrl: "views/globalViewPage.html", 
        controller: "globalViewController", 
        controllerAs: "globalViewCtrl" 
       }, 
       'subView': { 
        templateUrl: "views/subView.html", 
        controller: "subViewController", 
        controllerAs: "subViewCtrl" 
       }      
      } 
     });

출처

2016-07-05 Yash Kapila

이 자습서를 확인하십시오. https://scotch.io/tutorials/angular-routing-using-u-router – Weedoze

감사합니다. Weedoze. 이 자습서는 상당히 도움이되었습니다. 나는 내 대답을 게시했습니다. –

아무런 문제가 없습니다. Yash, 즐거웠습니다 :) – Weedoze

app.js 의견에 Weedoze가 제공 한 튜토리얼을 거쳐 내 쿼리에 연결합니다. 업데이트 된 파일은 다음과 같습니다.

index.html은 위와 동일합니다.

content.html

<div class="row"> 
    <div class="col-md-3"></div> 

    <div class="col-md-6"> 
     <ul class="nav nav-pills nav-justified"> 
      <li class="active"><a ui-sref=".globalView">Global</a></li> 
      <li><a ui-sref=".subView">Sub View</a></li> 
     </ul> 
    </div> 

    <div class="col-md-3"></div> 
</div> 

<div class="row">  
    <br> 
    <hr></hr> 
    <div class="tab-content"> 
     <div class="tab-pane fade in active" ui-view></div> 
    </div> 

</div>

여기에 추가 할 점은 앞서 두 아이 뷰 사이에 탐색에 문제를 일으키는 내 앵커 태그의 데이터 토글 = "알약"을 가졌다는 것이다. 더 자세히 조사한 결과,이 토글을 제거하면 탐색 기능이 원활하게 작동한다는 것을 알게되었습니다.

는

$urlRouterProvider.otherwise("/globalView"); 
    $urlRouterProvider.when('', '/globalView'); 
    $stateProvider 
     .state('home', { 
      url: '', 
      views: { 
       /** Find the views named in index.html and inject the named views**/ 
       'header': { 
        templateUrl: 'views/header.html', 
        controller: 'headerController', 
        controllerAs: 'headerCtrl' 
       }, 
       'content': { 
        templateUrl: 'views/content.html', 
        controller: 'contentController', 
        controllerAs: 'contentCtrl',       
       } 
      } 
     })     
     .state('home.globalView', { 
      templateUrl: "views/globalViewPage.html", 
      controller: "globalViewController", 
      controllerAs: "globalViewCtrl", 
      url: '/globalView' 
     }) 
     .state('home.subView', { 
      templateUrl: "views/subView.html", 
      controller: "subViewController", 
      controllerAs: "subViewCtrl", 
      url: '/subView' 
     });

이 코드는 내가 두 아이 뷰와 내가보기 사이를 전환 할 때마다, 컨트롤러가 다시로드받을 전환 할 수 있습니다 app.js.

출처

2016-07-06 01:30:49

자식 상태가 변경 될 때 컨트롤러 다시로드 - 각도 UI 라우터

답변

관련 문제