質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

3120閲覧

AngularJSでui-routerを使用した際、入れ子内のページでjavascriptが動作しない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2017/07/29 10:54

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>&nbsp;打率</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">&nbsp;{{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 ]);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ui-viewは入れ子なので、テンプレートには完全なHTMLではなく、そこに入る部分のみのHTMLを記述してください。以下おそらく動くと思われるサンプルです。

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</head> 9<body ng-app="myApp"> 10<ui-view></ui-view> 11</div> 12</body> 13</html>

views/index.html

html

1<a ui-sref="result({id: 1})">シーズン1</a>

views/stats.html

html

1<table border=0> 2<tr> 3 <td bgcolor="#006400"><font size="+2" COLOR="#EEEEEE">打率TOP10(規定打席:{{items.regAtBats}}打席)</font></td> 4</tr> 5<tr> 6 <td> 7 <table border=1> 8 <thead> 9 <tr> 10 <th></th> 11 <th>選手名</th> 12 <th>打席数</th> 13 <th>打数</th> 14 <th>安打</th> 15 <th>HR</th> 16 <th>打点</th> 17 <th>四球</th> 18 <th>三振</th> 19 <th>二塁打</th> 20 <th>&nbsp;打率</th> 21 </tr> 22 </thead> 23 <tbody> 24 <tr ng-repeat="averageTop10 in items.averageTop10"> 25 <td align="right">{{averageTop10.rank}}</td> 26 <td><img width="15" height="15" src="/JCBLScore/img/{{averageTop10.teamId}}.jpg" title="{{averageTop10.teamName}}">{{averageTop10.name}}</td> 27 <td align="right">{{averageTop10.tpa}}</td> 28 <td align="right">{{averageTop10.atBats}}</td> 29 <td align="right">{{averageTop10.hit}}</td> 30 <td align="right">{{averageTop10.homerun}}</td> 31 <td align="right">{{averageTop10.rbi}}</td> 32 <td align="right">{{averageTop10.fourBall}}</td> 33 <td align="right">{{averageTop10.strikeOut}}</td> 34 <td align="right">{{averageTop10.twobase}}</td> 35 <td bgcolor="#FC9898">&nbsp;{{averageTop10.average | number:4 }}</td> 36 </tr> 37 </tbody> 38 </table> 39 </td> 40</tr> 41</table>

app.js

javascript

1angular.module('myApp', ['ui.router']) 2// Routes 3.config(function($stateProvider){ 4 $stateProvider.state('index',{ 5 url: '/', 6 templateUrl: 'views/index.html', 7 }).state('result',{ 8 url: '/result/season/:id', 9 templateUrl: 'views/stats.html', 10 controller: 'resultCtrl', 11 }) 12}) 13// Controllers 14.controller('resultCtrl', function($scope, $http, $stateParams) { 15 $scope.id = $stateParams.id; 16 $http({ 17 method: 'GET', 18 url: '/api/v1/result/season/'+$scope.id, 19 }).then(function(data) { 20 $scope.items = data; 21 }, function(data) { 22 alert("通信エラー"); 23 }); 24});

投稿2017/08/07 00:44

naga3

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/08/10 04:47

ありがとうございました。 ようやく理解できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問