2016-08-11 6 views
1

私は最初のページはすでに作成していますが、次のページを入力すると次のページが表示されます最初のページから2ページ目にデータを転送することができますが、次のページを読み込むことができません。 ...ここに私のhtmlとjsがどこイムが間違っているかわからない,,これまでのところだ-_-Angular.js routing

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/kandi.css"> 
</head> 
<body data-ng-app="nameBox" class="ng-scope"> 
    <ng-view></ng-view> 
    <section class="frontPageBox"> 
     <div data-ng-controller="appearCntrl"> 
      <form action="" method="">   
       <input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input"> 
       <a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>    
      </form> 
      <p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p> 
     </div> 

    </section> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 




    <script type="text/javascript"> 
     var app = angular.module("nameBox", ["ngRoute"]); 
     app.config(function($routeProvider) { 
      $routeProvider 
       .when("/kandi2", { 
        templateUrl : "kandi2.html" 
       }); 
      }); 
     app.controller("appearCntrl", function($scope){ 
      $scope.name = ""; 
      $scope.data = []; 
      $scope.data.push(name); 
     }); 
    </script> 
</body> 
</html> 
+0

コンソールにエラーがありますか? – AranS

+0

あなたはそれを試してみてください。 –

+0

私はFactoryを使ってどのコントローラでも簡単にデータを渡すことができると思います。 – VjyV

答えて

0

問題は、NG-viewタグ

<ng-view></ng-view> 
であります

DOM内に<!-- ngView: undefined -->要素を指定すると、ビューを添付する場所がありません。

<div ng-view></div> 

はその後、それが動作するはずです:

あなたのような何かを書くことができます。

+0

私は

を使用し、次のページをロードするボタンをクリックすると、次のページがクリックされたことがアドレスバーに表示されますが、何もロードされません。 – mosesjulafe

+0

私のソリューションにあなたのコードをコピーしました。私が上記を行ったときだけです。本当に違うのは、templateUrlだけです。 "kandi2.html"は有効なパスですか?ブラウザーの「姓」タブを使用して確認することができます。 –

+0

htmlが有効です、私は別のhtmlで試してみました...私はそれが動作するためにサーバー上にいる必要がありますか?または単にファイルにペーストをコピーしていたのですか? – mosesjulafe