Question

这是一个简单的内联控制器，它不起作用。我无法找到错误。我用ng-init测试过这个并用ng-repeat打印出来，效果很好。使用ng-controller，它没有。

<html data-ng-app>
<head>
    <title></title>
</head>
<body data-ng-controller="SimpleController">
Name: 
<br />
<input type="text" data-ng-model="name">
<ul>
    <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope){
    $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}
</script>
</body>
</html>

Answer 1

您需要使用

在javascript中启动应用

angular.module

表示您在data-ng-app

中指定的应用名称

Working Fiddle

Javascript代码：

angular.module("myApp", [])
    .controller('SimpleController', function ($scope) {
    $scope.customers = [{
        name: 'John Doe',
        city: 'New York'
    }, {
        name: 'Jane Doe',
        city: 'Melbourne'
    }, {
        name: 'Jack Daniels',
        city: 'Atlanta'
    }];
});

Answer 2

评论中有很多喋喋不休，所以我在答案中总结一下。

正如@squiroid正确陈述的那样，在最近的Angular版本和1.3中已经删除了全局控制器的使用（意味着定义一个函数，然后只引用它）。

您必须定义模块并向其注册控制器，因此总体而言您需要：

var myApp = angular.module("myApp", []);

function SimpleController($scope){
    $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}

myApp.controller("SimpleController", SimpleController); //This is a must now

在您看来，您需要参考您的模块：

<html data-ng-app="myApp">

Answer 3

您的代码在角度1.2版本中运行良好。

但如果您使用的是角度1.3+，则不会。

使用angular 1.3，您无法再在全局范围内使用全局控制器声明。您需要使用内联声明来定义控制器。

在您的HTML中：

<html data-ng-app="app">

在js：

    angular.module('app', []).controller('SimpleController', function($scope){
        $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
    });

或使用现有的控制器：

     angular.module('app', []).controller('SimpleController', SimpleController)

Answer 4

V31，

因为使用1.3，所以你肯定需要引导你的模块，因为使用控制器作为像你这样的全局函数已经在1.3中被弃用了。

请参阅下面的完整工作示例。试一试，看看它是否对你有帮助。

<html data-ng-app="customersApp">
<head>
<title></title>
</head>
<body data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
    <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script>
    var app = angular.module('customersApp', [])
    app.controller('SimpleController', ['$scope', function ($scope) {
        $scope.customers = [
    { name: 'John Doe', city: 'New York' },
    { name: 'Jane Doe', city: 'Melbourne' },
    { name: 'Jack Daniels', city: 'Atlanta' }
        ];
    }]);
  </script>
</body>
</html>

SO1

Answer 5

对于角度使用模块的最佳实践（我不考虑模块已死的Angular 2.0）： -

对于控制器，使用“controller as”并将控制器上的数据绑定在$ scope上。

<body data-ng-app="myApp" data-ng-controller="SimpleController as ctrl">Name:
    <br />
    <input type="text" data-ng-model="ctrl.name">
    <ul>
        <li ng-repeat="cust in ctrl.customers | filter:ctrl.name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
    </ul>
</body>

控制： -

angular.module("myApp", [])
    .controller('SimpleController', function () {
    this.customers = [{
        name: 'John Doe',
        city: 'New York'
    }, {
        name: 'Jane Doe',
        city: 'Melbourne'
    }, {
        name: 'Jack Daniels',
        city: 'Atlanta'
    }];
});

Fiddle

Answer 6

我使用Angular 1.2.26和1.3.12

做了两个例子

使用1.3.12的示例

<!DOCTYPE html>
<html ng-app="test">
<head>
    <!--<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
</head>

<body  ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        var app = angular.module('test', []);

        app.controller('SimpleController', function($scope){
             $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        });

    </script>
</body>
</html>

此处的主要变化是在脚本

中使用模块和控制器

使用1.2.26版本的示例

<!DOCTYPE html>
<html>
<head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" data-ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        function SimpleController($scope){
            $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        }
    </script>
</body>
</html>

这里我唯一的改变就是在正文中添加 ng-app =“”

Angularjs data-ng-controller

6 个答案: