トラブルAngularJS

Question

イリノイ試して内のルーティング使用してコントローラを接続し、説明するためにベストを尽くす...

私のコントローラが正常に動作し/接続されるようにそれはいないようです。私は正確に私の構文をチェックするたびに、正確な理由がわからない。ここに私のルート宣言は次のとおりです。

angular.module('portfolio', ['ngRoute']).config(function ($routeProvider, $locationProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/public/app/views/main.html', 
     controller: 'MainCtrl', 
     controllerAs: 'main' 
    }).when('/about', { 
     templateUrl: '/public/app/views/about.html', 
     controller: 'AboutCtrl', 
     controllerAs: 'about' 
    }).when('/Resume', { 
     templateUrl: '/public/app/views/resume.html', 
     controller: 'ResumeCtrl', 
     controllerAs: 'Resume' 
    }).when('/Samples', { 
     templateUrl: '/public/app/views/samples.html', 
     controller: 'SamplesCtrl', 
     controllerAs: 'Samples' 
    }).otherwise({ 
     redirectTo: '/' 
    }); 
    $locationProvider.html5Mode(false).hashPrefix(''); 
}); 

単なる例として、ここに私の履歴書の図である。

<paper-button ng-click="changeEx()" raised>Experience</paper-button> 
<paper-button ng-click="changeSkills()" raised>Skills</paper-button> 
<paper-button ng-click="changeEdu()" raised>Education</paper-button> 
<paper-button ng-click="changeMisc()" raised>Misc.</paper-button> 
<div ng-hide="exp"> 
    <p>Experience</p> 
</div> 
<div ng-show="skills"> 
    <p>Skills</p> 
</div> 
<div ng-show="education"> 
    <p>Education</p> 
</div> 
<div ng-show="misc"> 
    <p>Misc.</p> 
</div> 

は最後に、ここで再開ビュー用のコントローラの宣言は次のとおりです。

angular.module('portfolio', []).controller('ResumeCtrl', function() { 
    this.exp = true; 
}); 

明らかに、このコントローラーは不完全ですが、私は単にこの変数を使ってテストしようとしています。

Answer 1

既に宣言されているモジュールを参照するときは、角カッコを使用しないでください。これは、新しいモジュールを宣言するときにAngularによって解釈されます。

angular.module('portfolio').controller('ResumeCtrl', function() { 
    this.exp = true; 
}); 

次は、メインのHTMLページです。あなたのページのどこかにこのディレクティブを持っていますか：

<div ng-view></div> 

もう一つの問題は、あなたがResumeとして、あなたのルートでcontrollerAsを宣言しているが、あなたはあなたの変数を割り当てることthis.expを使用しても、あなたのビューでexpを参照しようとしているということです。あなたができる、

<div ng-hide="Resume.exp"> 
    <p>Experience</p> 
</div> 

か、あるいは：

angular.module('portfolio').controller('ResumeCtrl', function() { 
    var Resume = this; 
    Resume.exp = true; 
}); 

そして、あなたのビューで、あなたがcontrollerAsで定義された同じ名前を使用して変数を参照する必要があります：あなたは、代わりにこのパターンに従う、または$scopeを使用する必要がありますそうでなければ、トンを再定義され、コントローラ宣言からブラケットを取り外し

​​