コントローラで定義されている変数がhtmlで利用できません

Question

Angular Controllerで定義された変数に、このコントローラーを使用してhtmlファイルをアクセスしようとしています。しかし、彼らはそこにいません。ここに私のコードは次のとおりです。MapsControllerで

：

Search.htmlで

angular.module('Maps').controller('MapsController', ['$scope', '$location', 'MapsService', function($scope, $location, MapsService) { 

    $scope.number = 5; 
    ... ... 
}]); 

：

<div class="generic-container" ng-controller="MapsController as ctrl"> 
    number: {{ctrl.number}} 
</div> 

私はこれを実行すると、numberは常に空です。私は何が欠けていますか？

（これは実際に私は、データベースによって読み込まれますアレイにアクセスしようとしている。明らかに単純化したバージョンである。しかし、校長に考え方が同じであるように思える。）

Answer 1

あなたが使用していますコントローラーがhtmlで間違っている

<div class="generic-container" ng-controller="MapsController as ctrl"> 
    number: {{ctrl.number}} 
</div> 

htmlでコントローラーのエイリアスを作成する必要がないため、これは機能しません。

<div class="generic-container" ng-controller="MapsController"> 
    number: {{ctrl.number}} 
</div> 

また、コントローラのスコープ内の変数にアクセスするには、コントローラオブジェクトにアクセスするためにコントローラオブジェクトを指定する必要はありません。

<div class="generic-container" ng-controller="MapsController"> 
    number: {{number}} 
</div> 

ジョブを実行する必要があります。

Answer 2

contoller asシンタックス（MapsController as ctrl）を使用すると、コントローラのインスタンスをスコープの変数ctrlに割り当てるためにangleを指定します。したがって、スコープの代わりにプロパティnumberをコントローラに追加してください。 $scope.number = 5;からthis.number = 5;に変更すると動作します。