Question

我试图使用控制器运行一个简单的Angular示例。但是，它似乎不起作用。

这是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-model 指令有效。但控制器没有。我正在使用1.4.x（稳定）Angular js。

我尝试了其他问题并做了答案建议，仍然没有结果。那么我在这里做错了什么？

也创建了fiddle。虽然在小提琴中，甚至ng-model也不起作用。

Answer 1

您尚未将$ scope正确注入控制器。你必须在数组中放入'$ scope'。试试这个：

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

添加评论

虽然完全可以将控制器函数作为第二个参数传递，就像线程中的其他答案一样，但我建议使用此方法（我们传递具有依赖关系和控制器函数的数组），如果您想在缩小代码期间缩小代码生产

Minifying将经常在缩小过程中更改变量名称，此方法可确保您的依赖项在此之后仍然可用。

Answer 2

如果您使用的是现代版的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"}
     ];

  }]);

Answer 3

您的控制器应该像：

 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"}
    ];
});

AngularJS Simple Controller无法正常工作

3 个答案: