AngularJS簡單控制器不工作

我正在嘗試使用控制器運行一個簡單的Angular示例。但是，它似乎並不奏效。AngularJS簡單控制器不工作

下面是HTML：

<!DOCTYPE html> 
    <html ng-app = "app"> 
    <head> 
     <title></title> 
     <script type="text/javascript" src="js/lib/angular.min.js"></script> 
<script type="text/javascript" src="js/my.js"/> 
    </head> 
    <body> 
    <label for = "fname">Name:</label><input type="text" id="fname" ng-model="name"/>{{name}} 
    <div class="container" ng-controller="SimpleController"> 
     <ul> 
      <li ng-repeat="hero in heroes">{{hero.name}} - {{hero.city}}</li> 
     </ul> 
    </div> 
    </body> 
    </html>

腳本my.js是：

angular.module("app",[]).controller('SimpleController',[function ($scope){ 
    $scope.heroes = 
    [ 
     {name:"Bruce Wayne", city:"Gotham"}, 
     {name:"Kal-El", city:"Metropolis"}, 
     {name:"Barry Allen", city:"Central City"}, 
     {name:"Kara Jor-El", city:"National City"}, 
     {name:"Shazam", cuty:"Fawcett City"} 
    ]; 

}]);

在我的本地系統中，NG-模型指令的作品。但控制器沒有。我使用1.4.x（穩定）Angular js。

我試過其他問題發佈並做了什麼答案的建議，仍然沒有結果。那麼我在這裏做錯了什麼？

也創建了fiddle。雖然在小提琴中，即使ng-model也不起作用。

來源

2016-02-05 neo.one

要修正小提琴，請在'ng-app =「app」'處添加致敬你的開幕詞''標籤 – eronisko

更新你的小提琴https://jsfiddle.net/yk8vs0ua/4/。你只需要添加ng-app到body標籤 –

@Narendar CM，謝謝你修理小提琴家。這真是我的愚蠢.. :) –

您沒有將$ scope正確注入到控制器中。你必須在數組中放置'$ scope'。試試這個：

angular.module("app",[]).controller('SimpleController',['$scope', function ($scope){ 
// Your Stuff 
}]);

添加的註釋

雖然它完全沒通過控制器的功能就像在線程的其他答案的第二個參數，我會推薦這個方法（我們是傳遞一個具有依賴關係和控制器功能的數組）如果您想在生產期間縮小代碼。

Minifiers在縮小過程中會經常更改變量名稱，此方法可確保您的依賴關係在此之後仍然有效。

來源

2016-02-05 07:50:28

嗯，它的工作完美無瑕。謝謝:) 所以我遵循的指南，建議'$ scope'可以直接作爲參數傳遞。我認爲早期版本就是這種情況。正確？ –

@ neo.one直接傳遞$ scope，你直接傳遞控制器函數作爲第二個參數而不是數組。當你傳遞一個數組作爲第二個參數時，你以這種方式傳遞參數 –

控制器應該是這樣的：

angular.module("app",[]).controller('SimpleController',function ($scope){ 
    $scope.heroes = [ 
     {name:"Bruce Wayne", city:"Gotham"}, 
     {name:"Kal-El", city:"Metropolis"}, 
     {name:"Barry Allen", city:"Central City"}, 
     {name:"Kara Jor-El", city:"National City"}, 
     {name:"Shazam", cuty:"Fawcett City"} 
    ]; 
});

來源

2016-02-05 07:53:09 aitnasser

如果你正在使用的AngularJS 現代版我會建議使用ControllerAs語法：

<div class="container" ng-controller="SimpleController as simpleController"> 
    <ul> 
     <li ng-repeat="hero in simpleController.heroes">{{hero.name}} - {{hero.city}}</li> 
    </ul> 
</div>

和JS：

angular.module("app",[]).controller('SimpleController',function(){ 
    this.heroes = [ 
     {name:"Bruce Wayne", city:"Gotham"}, 
     {name:"Kal-El", city:"Metropolis"}, 
     {name:"Barry Allen", city:"Central City"}, 
     {name:"Kara Jor-El", city:"National City"}, 
     {name:"Shazam", cuty:"Fawcett City"} 
    ]; 

    }]);

來源

2016-02-05 07:53:57

{{hero.name}} - {{hero.city}}

你的意思是我猜 – dendimiiii

是的，當然，謝謝，更新了代碼 –

AngularJS簡單控制器不工作

回答

相關問題