控制器中定義的變量在html中不可用

Question

我試圖使用此控制器訪問我的Angular Controller中html文件中定義的變量。但他們不在那裏。這裏是我的代碼：

在MapsController：

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

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

在Search.html：

<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。因此，將您的財產number添加到控制器而不是範圍。 更改$scope.number = 5;到this.number = 5;它會工作。