AngularJS 1.4.3でui-routerを使用して複数の画面に遷移でき、
サーバサイドと非同期で通信してデータを取得・表示する
フロントエンドアプリケーションを作っているのですが、
- ルーティングでui-view内に入れ子として表示されたhtml上でjavascriptが読み込めない。
- ルーティングでui-view内に入れ子として表示されたhtml上でjavascriptが動かない。
という状況になってしまい詰まっています。
ググってみたところ、stackoverflowでも同様の質問がありましたが解決していないようでした。
ソースは下記に添付しますが、stats.htmlが表示されたときに
data.js(サーバとの非同期通信)が動くようにしたいと思っています。
入れ子でない場合は通信できることを確認しています。
※色々修正し過ぎてjsonを受け取って表示する部分の修正が間に合っていません。
同様の動きをするサンプルページや解説ページや解決法などありましたら
お教えいただけますでしょうか。
stackoverflow程度の英文は読めます。
よろしくお願いいたします。
index.html
html
1<html> 2<head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 5 <script src="https://code.angularjs.org/1.4.3/angular.min.js"></script> 6 <script src="https://unpkg.com/@uirouter/angularjs@1.0.5/release/angular-ui-router.js"></script> 7 <script src="scripts/app.js"></script> 8 <script src="scripts/main.js"></script> 9 <script src="scripts/route.js"></script> 10 11</head> 12<body ng-app="myApp"> 13<div ng-controller="resultCtrl"> 14 <div ui-view></div> 15 <!-- <script src="scripts/data.js"></script> --> 16</div> 17</body> 18</html>
views/stats.html
html
1<html> 2<head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 5 <script src="https://code.angularjs.org/1.4.3/angular.min.js"></script> 6 <!-- 7 <script src="https://unpkg.com/@uirouter/angularjs@1.0.5/release/angular-ui-router.js"></script> 8 --> 9 <script src="../scripts/app.js"></script> 10 <script src="../scripts/main.js"></script> 11 <script src="../scripts/data.js"></script> 12</head> 13<body ng-app="myApp"> 14<div ng-controller="resultCtrl"> 15<table border=0> 16<tr> 17 <td bgcolor="#006400"><font size="+2" COLOR="#EEEEEE">打率TOP10(規定打席:{{items.regAtBats}}打席)</font></td> 18</tr> 19<tr> 20 <td> 21 <table border=1> 22 <thead> 23 <tr> 24 <th></th> 25 <th>選手名</th> 26 <th>打席数</th> 27 <th>打数</th> 28 <th>安打</th> 29 <th>HR</th> 30 <th>打点</th> 31 <th>四球</th> 32 <th>三振</th> 33 <th>二塁打</th> 34 <th> 打率</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr ng-repeat="averageTop10 in items.averageTop10"> 39 <td align="right">{{averageTop10.rank}}</td> 40 <td><img width="15" height="15" src="/JCBLScore/img/{{averageTop10.teamId}}.jpg" title="{{averageTop10.teamName}}">{{averageTop10.name}}</td> 41 <td align="right">{{averageTop10.tpa}}</td> 42 <td align="right">{{averageTop10.atBats}}</td> 43 <td align="right">{{averageTop10.hit}}</td> 44 <td align="right">{{averageTop10.homerun}}</td> 45 <td align="right">{{averageTop10.rbi}}</td> 46 <td align="right">{{averageTop10.fourBall}}</td> 47 <td align="right">{{averageTop10.strikeOut}}</td> 48 <td align="right">{{averageTop10.twobase}}</td> 49 <td bgcolor="#FC9898"> {{averageTop10.average | number:4 }}</td> 50 </tr> 51 </tbody> 52 </table> 53 </td> 54</tr> 55</table> 56 57 </div> 58</body> 59</html>
scripts/route.js
javascript
1angular.module('myApp', ['ui.router']) 2// Routes 3.config(function($stateProvider){ 4 $stateProvider.state('/',{ 5 url: '/', 6 templateUrl: 'index.html', 7 controller: '', 8 }) 9}) 10.config(function($stateProvider){ 11 $stateProvider.state('result',{ 12 url: '/result/season/:id', 13 templateUrl: 'views/stats.html', 14 controller: 'resultCtrl', 15 params:{ 16 param: null 17 } 18 }) 19}) 20// Default 21.config(function($urlRouterProvider){ 22 $urlRouterProvider.when('', '/') 23}) 24.controller('resultCtrl', function($scope, $stateParams) { 25 $scope.id = $stateParams.id; 26 });
scripts/app.js
javascript
1var app = angular.module('myApp', []);
scripts/main.js
javascript
1app.controller('MainCtrl', []);
script/data.js
javascript
1app.controller('resultCtrl', 2 ['$scope','$http', function($scope,$http) { 3 //$scope.param = $stateParams.param; 4 $http({ 5 method: 'GET', 6 url: '/api/v1/result/season/'+$scope.id, 7 }) 8 .success(function(data, status, headers, config) { 9 $scope.result = data; 10 }) 11 .error(function(data, status, headers, config){ 12 alert("通信エラー"); 13 }); 14 } 15 ]);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/08/10 04:47