angularでコントローラーの定義が上手くいきません。

OnsenUiとangularJSを使っているのですがons-navivgatorで読み込んだページからコントローラーの定義をした場合にエラーがでます

index.html

<html ng-app="myApp">
...
 <script> 
    var app = angular.module('myApp', ['onsen']);    
  </script>   
<body>
<ons-navigator page="./tmp.html" var ="pages"></ons-navigator>
</body>
</html>

tmp.html


<ng-include src="'tmp.html'"></ng-include>
<ons-template id="tmp.html" ng-app="butap">

<script>
var butapp=angular.module('butap', []);
    butapp.controller("ButtonsController", function($scope) {
  });
</script>

<ons-page>
<div ng-app="butap">
 <ons-button>But</ons-button>
</div>

<ons-template>

Error

Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=ButtonsController&p1=not%20a%20function%2C%20got%20undefined
    at file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:6:412
    at sb (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:23:18)
    at Pa (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:23:105)
    at file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:89:310
    at ag (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:72:419)
    at p (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:64:262)
    at g (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:58:481)
    at p (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:66:281)
    at g (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:58:481)
    at p (file:///data/data/mobi.monaca.debugger/files/projects/cloud/58e480d6ff2af28e244d834d/www/lib/angular/angular.min.js:66:281)

親子関係が関与しているのか不明ですが、ずっとこれで悩まされています。
コントローラをOnsennavigatorで取得したページで定義するにはどうしたらいいのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

コードを見ていると色々と勘違いがあるような気がしています。
とりあえずons-navigatorで指定したページでControllerを利用するコードを書いてみました。こんな感じで動きます。
無駄なものをそぎ落としていますので、今のseriさんからすると何故これで動くのかと思われると予想します。疑問点は遠慮なく聞いてください。

index.html

HTML
1<!DOCTYPE HTML>
2<html ng-app="myApp">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18    
19    var app = angular.module('myApp', ['onsen']);    
20    
21    app.controller("ButtonsController", function($scope) {
22      $scope.click = function(){
23        alert("クリックされました");
24      }
25    });
26    
27  </script>
28</head>
29<body>
30  <ons-navigator page="tmp.html"></ons-navigator>
31</body>
32</html>
33

tmp.html

HTML
1<ons-page ng-controller="ButtonsController">
2  <ons-button ng-click="click()">But</ons-button>
3</ons-page>
4

投稿2017/05/09 01:25

akabee

総合スコア1947

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

angularでコントローラーの定義が上手くいきません。

関連した質問