2016-11-07 35 views
0

AngularJSを初めて使用しています。AngularJS - ngViewを使用するとHTMLページに返信されたデータが表示されない

私はSQLデータベースを使用したPHPサーバーを持っていますが、AngularJSと$ http get要求をサーバーに送信するボタンを持つhtmlページがあり、これは同じサーバー上のテーブルに表示されるデータの配列を返しますページ。

websitename/myList.htmを直接開いてgetListを押すと、データは問題なく完全に表示されますが、ngViewルーティングでページを開くとページ要素が表示されますが、ボタンを押すと、サーバーからのデータでページが更新されません。

2つのページの間に追加のデータリンクが必要ですか?ルートと

myList.htm

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="https//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 

<script> 
angular.module("crudApp", []) 
.controller("userController", function($scope,$http){ 
$scope.users = []; 
$scope.tempUserData = {}; 
// function to get records from the database 

$scope.getList = function(){ 
$http.get('action.php', { 
params:{ 
'type':'getList' 
     } 
    }).success(function(response){ 
     if(response.status == 'OK'){ 
      $scope.users = response.records; 
     } 
    }); 
}; 


}); 

</script> 


<body ng-app="crudApp"> 
<div class="container" ng-controller="userController"> 

<a href="javascript:void(0);" class="btn btn-success"  ng-click="getList()">getList</a> 


     <table class="table table-striped"> 
      <tr> 
       <th width="20%">Name</th> 
       <th width="30%">Email</th> 
       <th width="20%">Phone</th> 
      </tr> 
      <tr ng-repeat="user in users"> 
       <td>{{user.Name}}</td> 
       <td>{{user.Email}}</td> 
       <td>{{user.Phone}}</td> 
      </tr> 
     </table> 

<p>end of table</p> 
</body> 

</html> 

ページ:

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 

<body ng-app="myApp"> 

<p><a href="#/">Main</a></p> 
<a href="#list">List</a> 



<div ng-view></div> 

<script> 
var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
$routeProvider 
.when("/", { 
    templateUrl : "main.htm" 
}) 
.when("/list", { 
    templateUrl : "myList.htm" 
}); 
}); 
</script> 

<p>Click on the links to navigate</p> 
</body> 
</html> 

ありがとうございます。

+0

私たちにいくつかのコードを見せてください –

答えて

0

あなたのコントローラとapp.jsに同じ.module名が必要です。

var app = angular.module("myApp", ["ngRoute"]); 
angular.module("myApp", []).controller("userController" 

あなたがNGルートを経由して機能しなかった理由は、あなたが働くだろうHTMLページをロードするためにあなたのngのビューを使用して、その後、最初のインスタンスで「MyApp]を」ロードされたためだったが、あなたのモジュール理由"myApp"を使用するコントローラーを明示的に探していたため、コントローラーへの依存として追加されませんでした。これは、明示的に "myApp"を使用するように指示していないためです。

また、hrefタグに#/ listが必要です。

"myList.htm"をロードすると、ng内のそれらのスクリプトの複製をロードするので、アプリケーション全体に関係するように、index.html用の角度スクリプトを一度参照するだけで済みます-viewタグこれは、 "main.htm"がデフォルトの "index.html"の代わりに最初に読み込まれた場合、localhost:portnum /#/ listに直接行くときにも正常に動作します。

また、 "main.htm"上でコントローラスクリプトを参照する必要があります。これにより、ng-view内で使用するためにロードされます。大きなページの場合は、 ;

<script src="scripts/app.js"></script> 
<script src="scripts/controller"><script> 

現在のプロジェクトディレクトリに関連するファイルパスです。

希望すると助かります!

関連する問題