1
私は小さなngRouteの例を持っていますが、これは複数のアプリケーションとコントローラを使用しようとしています。最初のapp/controllerはメインページ用で、app/controllerの2番目のセットはngRouteがボタンを押した後に読み込むhtml用です。しかし、それは動作していないようです。以下のコード：複数のコントローラがngRoute内で動作しています
メインモジュール
var app = angular.module("MainModule", ["ngRoute"]);
メインコントローラ
app.controller("MainController", function ($scope) {
});
app.config(function ($routeProvider) {
$routeProvider
.when('/customers', {
templateUrl: "customers.html",
controller: "CustomerController"
})
});
カスタマー・モジュール
var CustomerModule = angular.module("CustomerModule", []);
カスタマー・コントローラ
CustomerModule.controller("CustomerController", function ($scope) {
$scope.Test = "Hey";
$scope.CustomerArray = [
{ "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman" },
{ "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
]
});
index.htmlを
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>
<div ng-app="MainModule">
<div id="TopDiv">Main Module</div>
<a href="#/customers"><input type="button" value="Load Customers" /> </a>
<div ng-view></div>
</div>
</body>
</html>
customers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
</head>
<body>
<div ng-app="CustomerModule" ng-controller="CustomerController">
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
</ul>
</div>
</body>
</html>
がコードのビット長が、うまくいけば、簡単なコード。 "Load Customer"ボタンを押したときの出力は、文字通り、{{Test}}の後に続く配列データなしです。
私はちょうど角を学んでいますので、この問題の助けをいただければ幸いです。私は、楽しく、学ぶためにこれをやっています。だから、私は問題が押されていないと思う。 :)ありがとう！
問題ここでは、 'ng-に* NG-ルートは* parialをロードするために期待されていることですあなたのcustomers.htmlファイルは部分的なものではなく、独自の 'ng-app'ファイルを含んでいます。また、 '$ routeProvider'の' controller'パラメータは '$ routeProvider'が設定されているモジュールと同じモジュールからコントローラオブジェクトをインスタンス化しますが、' CustomerController'はまったく別のモジュールです。その上に、JavaScriptの 'controller'とHTMLの' ng-controller'を同時に使うべきではありません。コントローラの一意のインスタンスを読み込むためです。 – Claies
ここには多くの間違い、言い換えれば間違いがあります。私は実際のサンプルをまとめることができますが、少し時間がかかります。 – Claies
お時間をありがとうございました。私はこの事例を投稿するだけで、多くの間違いを覚えています。あなたが実用的なサンプルを提供することができれば、それは素晴らしいことでしょう！もしそうでなければ、それは大丈夫です、私はそれが多くの努力であることを理解しています。これは私のために学習し実験するためのものです。ありがとうございました。 –