2017-01-19 8 views
0

私は2つのコントローラheaderController、aboutControllerを持っています。最初に実行する別のコントローラに値を渡す

headerController - >作品を約-たちページのロード - >ナビゲーションとリダイレクト

aboutControllerを維持するために。

aboutControllerが読み込まれるときにheaderController変数の値を更新する必要があります。すなわち、私たちのページが読み込まれると、すべてのページと同様にabout-usのナビゲーションがアクティブになります。

これは私のコードです:

app.service('shareService', function() { 
    var data; 
    return { 
     getProperty: function() { 
      return data; 
     }, 
     setProperty: function (value) { 
      data = value; 
     } 
    }; 
}); 
app.controller('headerController', function ($scope, shareService) { 
    $scope.navigation = [ 
     {url: '#!/home', name: 'Home'}, 
     {url: '#!/about-us', name: 'About Us'}, 
     {url: '#!/services', name: 'Services'} 
    ]; 
    var data = shareService.getProperty(); 
    console.log(data); 
    $scope.selectedIndex = 0; 
    $scope.itemClicked = function ($index) { 
     console.log($index); 
     $scope.selectedIndex = $index; 
    }; 
}); 
app.controller('aboutController', function ($scope, shareService) { 
    console.log('test'); 
    $scope.selectedIndex = 1; 
    shareService.setProperty({navigation: $scope.selectedIndex}); 
}); 

はheader.html:

<header ng-controller="headerController"> 
    <div class="header"> 
     <div class="first-half col-md-6"> 
      <div class="row"> 
       <div class="logo"> 
        <a href="#!/home"><img src="assets/img/logo.png" alt=""/></a> 
       </div> 
      </div> 
     </div> 
     <div class="second-half col-md-6"> 
      <div class="row"> 
       <div class="social-share"> 
        <ul id="social-share-header"> 
         <li><i class="fa fa-facebook" aria-hidden="true"></i></li> 
         <li><i class="fa fa-twitter" aria-hidden="true"></i></li> 
         <li><i class="fa fa-google-plus" aria-hidden="true"></i></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <nav> 
      <ul ng-repeat="nav in navigation"> 
       <li class="main-nav" ng-class="{ 'active': $index == selectedIndex }" 
      ng-click="itemClicked($index)"> 
        <a href="{{nav.url}}">{{nav.name}}</a> 
       </li> 
      </ul> 
     </nav> 
    </div> 
</header> 

index.htmlを これは私のテンプレートがどのように動作するかです。

<body ng-app="myApp"> 
     <section class="first-section"> 
      <div ng-include="'views/header.html'"></div> 
     </section> 
     <section class="second-section"> 
      <div ng-view></div> 
     </section> 
     <section class="last-section"> 
      <div ng-include="'views/footer.html'"></div> 
     </section> 
    </body> 

更新1:index.htmlファイルを追加しました。

更新2:問題の説明:about usページに直接移動すると、まだホームナビゲーションが有効になります。しかし、それはすべきだAbout Us

+0

'AboutController'によって更新され、' HeaderController'によって読み込まれるサービス内で変数を設定することができます。 – Weedoze

+0

問題が何であるか分かりません。私はヘッダーコントローラは、DOMには常に含まれている別のテンプレートであるヘッダーのために存在すると思います。したがって、ユーザーがヘッダーからnav要素をクリックすると、itemClickedがトリガーされます。コントローラーが操作されても、ヘッダーコントローラーはまだ存在しますが、同じことが起こります。問題を指定してください。 – Korte

+0

私の更新を確認してください – Jagadeesh

答えて

0

お探しのものは、コントローラ間のイベントベースの通信です。これは、を使用して簡単に行うことができます。 $ rootScope。$ on、$ rootScope。$ emit、$ rootScope。$ broadcastのようになります。この答えで3つすべてを説明することは過度のものになるでしょう。こんにちは。article

関連する問題