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简单控制器不工作

回答

相关问题