0

ここに奇妙なバグがありますが、私は他のビューに切り替えることはできますが、私の問題は単純な変数でもビューに到達できないということです。誰も私の(おそらく愚かな)間違いを見ますか?AngularJS変数が表示されない

Index.htmlと

<html ng-app="myApp"> 
<head> 
    <title>AngularJS oefening</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<body> 
    <div class="container"> 
     <header> 
      <a href="#/home">Home</a> 
      <a href="#/about">Over ons</a> 
      <a href="#/contact">Contact</a> 
     </header> 
     <div ng-view> 

     </div> 
     <footer> 
      Copyright... 
     </footer> 
    </div> 

    <script src="js/angular/angular.min.js"></script> 
    <script src="js/angular/angular-route.min.js"></script> 
    <script src="js/controller.js"></script> 
</body> 

Controller.js

angular.module('myApp', ['ngRoute']) 
    .config(moduleConfig); 

moduleConfig.$inject = ['$routeProvider']; 

function moduleConfig($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'homeController', 
     contollerAs : 'homeCtrl' 
    }) 
    .when('/home', { 
     templateUrl: 'views/home.html', 
     controller: 'homeController', 
     contollerAs : 'homeCtrl' 
    }) 
    .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'aboutController', 
     contollerAs : 'aboutCtrl' 
    }) 
    .when('/contact', { 
     templateUrl: 'views/contact.html', 
     controller: 'contactController', 
     contollerAs : 'contactCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
}; 

angular.module('myApp') 
    .controller('homeController', homeController) 
    .controller('aboutController', aboutController) 
    .controller('contactController', contactController); 

function homeController() { 
    this.msg = "Hello home"; 
}; 

function aboutController() { 
    this.msg = "Hello about"; 
}; 

function contactController() { 
    this.msg = "Hello contact"; 
}; 

Home.html

<div> 
    <h1>{{homeCtrl.msg}}</h1> 
</div> 

ハードコードされたテキストでテストしたところ、メニューを使用してナビゲートすると正しい表示が得られました。私はまた別のオブジェクト(homeController、homeCtrl、...)のロギングを試みました。変数のみは定義されていませんが、このスコープは$スコープのみを含んでいます。

ありがとうございます。

+0

あなたが欠けている<基本のhref = "/" />ヘッド部インチ各コントローラにconsole.logを作成してみてください。これにより、正しく接続されているかどうかがわかります。 – Lazyexpert

+0

コンソールエラーが発生しないので、なぜタグを使用する必要がありますか?私はコントローラのコンソールログを試み、それらが表示されます。 **編集:**ビューを開いたときに

タグがHTMLに表示される(

) – StephanB

+0

どのバージョンのAngularを使用していますか? –

答えて

0

ほとんど2時間を検索した後、私は私の愚かな..愚かな間違いを見つけました。

contollerAs - >続きR ollerAs

+0

JSの問題の1つである良い点は、エラーなしで無限にパラメータを追加できます。 – PeterS

+0

はい、本当にありがとうございます。私はAngularがこれらのパラメータについて何もチェックを書かなかったので、それはとても奇妙であることがわかります。私はこの "問題"の最初の人であると想像することはできません。 – StephanB

関連する問題