AngularJS简单控制器不起作用

AngularJS Simple Controller not working

本文关键字：不起作用 控制器 简单 AngularJS      更新时间：2023-09-26

我试图使用控制器运行一个简单的 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。

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

也创造了一个小提琴。虽然在小提琴中，即使是 ng 模型也不起作用。

您

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

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

添加了注释

虽然像线程中的其他答案一样将控制器函数作为第二个参数传递是完全可以的，但如果您想在生产过程中缩小代码，我会推荐这种方法（我们正在传递一个带有依赖项和控制器函数的数组）。

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

如果您使用的是现代版本的 AngularJS）我建议使用控制器作为语法：

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

您的控制器应该是这样的：

 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"}
    ];
});
相关文章：