2016-04-30 10 views
1

私はウェブページを作成しようとしています。ユーザーがログインすると、新しいhtmlページ( "dashboard.html")が表示されます。この "dashboard.html"にはいくつかのリンク(他のhtmlページへのリンク)が含まれています。ユーザーが新しいhtml(「page_3.html」と言う)ページを開き、controller.this "page_3.html"コントローラからデータを取得していません。下は私のコードです。複数のhtmlページのコントローラからデータをフェッチできません

<!-- controller.js --> 
 
    var app = angular.module('myApp',[ 'ngRoute' ]); 
 
    app.config(function($routeProvider){ 
 
     $routeProvider 
 
     .when('/',{ 
 
      templateUrl: 'login.html' 
 
     }) 
 
     .when('/dashboard',{ 
 
      templateUrl: 'dashboard.html' 
 
    }) 
 
     .when('/page_3',{ 
 
      templateUrl: 'page_3.html' 
 
     }) 
 
     .otherwise({ 
 
      redirectTo : '/' 
 
     }); 
 
     
 
    }); 
 

 

 
    app.controller('app', function($scope, $location){ 
 
    $scope.item = "test"; 
 
     $scope.submit = function(){ 
 
       $location.path('/dashboard'); 
 
      } 
 
     }; 
 
    });
<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <title>Project</title> 
 
      <script src="angular.js"></script> 
 
      <script src="angular-route.js"></script> 
 
      <script src="controller.js"></script> 
 
     </head> 
 
     <body ng-app= "myApp" ng-controller="app"> 
 
      <div ng-view></div> 
 
     </body> 
 
    </html> 
 

 
    <!-- below is login.html page --> 
 

 
    <div ng-controller="app">  
 
    <form action="/"> 
 
     <button type="button" ng-click="submit()">Login</button> 
 
      </form> 
 
    </div> 
 

 
    <!-- below is my dashboard.html page --> 
 
    <div ng-controller="app"> 
 
     <h1>Page_3</h1> 
 
      <div><a href='page_3.html'>page_3</a></div> 
 
     </div> 
 
     
 
     <!-- below is page_3.html page --> 
 

 
    <div ng-controller="app"> 
 
    <p>{{item}}</p> 
 
    </div>

結果:{{アイテム}}

+0

私たちが扱うことができる[最小限の、完全で検証可能な例](https://stackoverflow.com/help/mcve)を作成できますか? –

答えて

0

私はng-controllerディレクティブを回避し、むしろルータのcontroller configオブジェクトを使用することをお勧めできますか?

.when('/page_3',{ 
    templateUrl: 'page_3.html', 
    controller: "app" 
}) 
+0

私は試しました。動いていない。 – VivekT

0

あり、あなたのコードを持つ2つの主要な問題となっている。

  1. /dashboard/page_3
  2. のようなURLがルートが/page_3用に設定されている問題を修正しましたためpushState via $locationProviderためのHTML 5のモードを有効にしますが、しかしaを持ちますタグが指されている/page_3.html

例:

  • ベースのタグを追加するdashboard.htmlに

    $locationProvider.html5Mode(true); 
    
  • 修正ルートconfigブロックにlocationProvider介しHTML5モードを有効

    <base href="/"> 
    
  • <!-- below is dashboard.html page --> 
    <div ng-controller="app"> 
        <h1>Page_3</h1> 
         <div><a href='page_3.html'>page_3</a></div> 
        </div> 
    

Click here for the demo/jsbin.

その他/提案は:Zack Briggsとして示唆されています。ルーティングでコントローラの構文を使用すると、ルータの設定で、より良いコード構造/デザイン、directives、またはcomponentsが得られます。また、すべてを1か所にまとめることは、成長するプロジェクトにとってはしばしば悪い考えです。

関連する問題