入れ子になった角度UIルーターでui-srefを使用するには？

これは長時間の研究と技術の応用でしたが、問題を解決することはできません。私のアプリには、家庭、スポーツ、国という3つのトップナビゲーションがあります。 index.htmlの中sports.htmlで入れ子になった角度UIルーターでui-srefを使用するには？

<ul> 
    <li><a ui-sref="home">Home</a></li> 
    <li><a ui-sref="sports">Sports</a></li> 
    <li><a ui-sref="country">Country</a></li> 
</ul> 
<div ui-view></div>

ある下回るよう HTMLに見える
、機能していない他の3つのナビゲーション、（彼らはありませんがあります

<head> 
<script src="js/angular-ui-router.min.js"></script> 
<script src="js/angular.min.js"></script> 
<script src="js/index.js"></script> 
</head>

ナビゲーションは次のようになりますクリック可能）。

<ul> 
    <li><a ui-sref="sports.football">Football</a></li> 
    <li><a ui-sref="sports.weightlifting">Weightlifting</a></li> 
    <li><a ui-sref="sports.swimming">Swimming</a></li> 
</ul> 
<div ui-view></div>

角度は、ユーザーがアプリを開いたとき、ホーム、スポーツや国との上部のメニューバーがあるはず、

基本的に

$stateProvider 
.state('home', { 
url: '/', 
templateUrl: 'index.html'  
}) 
.state('sports', { 
url: '/sports', 
templateUrl: 'sports.html'  
})  
.state('country', { 
url: '/country', 
templateUrl: 'country.html'  
}) 
.state('sports.football', { 
url: '/football', 
templateUrl: 'sports/football.html'  
}) 
.state('sports.weightlifting', { 
url: '/weightlifting', 
templateUrl: 'sports/weightlifting.html'  
}) 
.state('sports.swimming', { 
url: '/swimming', 
templateUrl: 'sports/swimming.html'  
});

のように見えます。ユーザーがスポーツをクリックすると、このページにはサッカー、重量挙げ、スイミングを示す別のビュー/別のサブナビゲーションが表示されます。ただし、これらのサブナビゲーションはクリックできず、動作しません。

問題の原因を見つけるのを手伝っていただければ幸いです。

出典

2017-01-24 John Smith

あなたはこれを試してみました - > UI-SREF = "サッカー" –

あなたはどのコンソールエラーがありますか？ –

パスの後に '）'が必要だと思うので、 '.state（ 'home'、{ url： '/'、 templateUrl： 'index.html' } foo '...' – MannfromReno

問題はありませんオード。おそらくあなたはいくつかの依存関係を見逃しているかもしれません。私のプランナーを見てください。 click here to view code demo

app.js

(function(){ 

    angular 
    .module('plunker', ['ui.router']); 

    })();

router.js

(function(){ 

     'use strict'; 

     angular 
     .module('plunker') 
     .config(['$stateProvider', function($stateProvider) 
     { 
      $stateProvider 
      .state('home', { 
        url: '/', 
       templateUrl: 'home.html'  
       }) 
      .state('sports', { 
      url: '/sports', 
      templateUrl: 'sports.html'  
      })  
      .state('sports.football', { 
      url: '/football', 
      templateUrl: 'football.html'  
      }) 
      .state('sports.weightlifting', { 
      url: '/weightlifting', 
      templateUrl: 'weightlifting.html'  
      }) 
      .state('sports.swimming', { 
      url: '/swimming', 
      templateUrl: 'swimming.html'  
      }) 
      .state('country', { 
      url: '/country', 
      templateUrl: 'country.html'  
      }); 

     }]) 


    })();

出典

2017-01-24 23:16:55 Kalyan

なぜ上部に2つの角度設定がありますか？それは何をするためのものか？ .module（ 'plunker'、['ui.router']）; 角度 .module（ 'plunker'）の.config（[ '$ stateProvider'、関数（$ stateProvider） –

@JohnSmith：。申し訳ありませんが...私の悪い思想生命維持を使用して、ルーティングからアプリのJSをsperatingのが、それを忘れてしまいました。今すぐ私の答えとプランカのコードも更新しました。乾杯。 – Kalyan

ありがとうございます。 –

-1

<li><a ng-click="goTo('sports.football')">Football</a></li>

コントローラ内で

$scope.goTo = function(path){ 
$state.go(path) 
}

出典

2017-01-24 21:24:51

'ui-router'を使っているなら、' ng-click'とコントローラに関数を実装する必要はありません。 – MannfromReno

はい、あなたは正しいですが、この問題を解決するために私は別の方法を提案しました –

@MannfromRenoはい、ng-clickとコントローラなしでそれを行うことができます。私がHTML部分の私の.state部分で何かをねじることができるなら、それは素晴らしいことでしょう。 –

これは、ネストされたビューの問題です。異なるビューを明示的にターゲティングすると、それを解決できます。 sports.htmlで

<ul> 
    <li><a ui-sref="home">Home</a></li> 
    <li><a ui-sref="sports">Sports</a></li> 
    <li><a ui-sref="country">Country</a></li> 
</ul> 
<div ui-view></div> <!-- your sports.html plugs in here -->

：あなたのapp.jsでそう

<ul> 
    <li><a ui-sref="sports.football">Football</a></li> 
    <li><a ui-sref="sports.weightlifting">Weightlifting</a></li> 
    <li><a ui-sref="sports.swimming">Swimming</a></li> 
</ul> 
<div ui-view></div> <!-- your [sportName].html plugs in here -->

、あなただけのように、sport.htmlでネストされたビューに関するいくつかのparamsを追加する必要があります。

$stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'index.html'  
    }) 
    .state('sports', { 
     url: '/sports', 
     templateUrl: 'sports.html'  
    })  
    .state('country', { 
     url: '/country', 
     templateUrl: 'country.html'  
    }) 
    .state('sports.football', { 
     url: '/football', 
     // Relatively targets the unnamed view in this state's parent state, 'sports'. 
     // <div ui-view/> within sports.html 
     views: { 
     "": { 
      templateUrl: 'sports/football.html' 
     } 
     }  
    }) 
    .state('sports.weightlifting', { 
     url: '/weightlifting', 
     // Relatively targets the unnamed view in this state's parent state, 'sports'. 
     // <div ui-view/> within sports.html 
     views: { 
     "": { 
      templateUrl: 'sports/weightlifting.html' 
     } 
     } 
    }) 
    .state('sports.swimming', { 
     url: '/swimming', 
     // Relatively targets the unnamed view in this state's parent state, 'sports'. 
     // <div ui-view/> within sports.html 
     views: { 
     "": { 
      templateUrl: 'sports/swimming.html' 
     } 
     } 
    });

さらに詳しい情報が必要な場合は、次の文書をお読みください。https://github.com/angular-ui/ui-router/wiki/Multiple-Named-views

出典

2017-01-24 21:52:58

これは良い戦略のようです。したがって、最初のビューでは

と2番目の3つのビュー

とと

–

とする必要があります。すべてのビューに名前を付けるには、$ stateProvider設定でさらにパラメータを追加する必要があります。私のソリューションでは、これを避けることができます。私は水泳状態の例を取る。状態_ ** sports.swimming ** _は、状態_ ** sports ** _の子のように明示的に考慮されます。したがって、最初の ''では、_sports.html_（親状態）がプラグインされ、2番目の ''に_sports/swimming.html_（子状態）がプラグインされています。 –

私は試してみます。ありがとうございました。 –

入れ子になった角度UIルーターでui-srefを使用するには？

答えて

関連する問題