AngularJS ng-controller在v1.4.1中不起作用

Question

Please check my Code. 请检查我的代码。

Why ng-controller not working? 为什么ng-controller不起作用？

<html data-ng-app="">
    <head>
        <title>Angular JS DEMO</title>
        <style>
            .container{
                padding: 5px;
                border: 1px solid #ccc;
                margin: 2px 0px;
            }
        </style>
    </head>
    <body>
         <div class="container" data-ng-controller="SimpleController">
            <h3>Adding a Simply Controller</h3>
            Name : <input type="text" data-ng-model="textbox_emp" /> {{textbox_emp}}
            <br>
            <ul>
                <li data-ng-repeat="emp2 in emp_det">{{emp2.name}} - {{emp2.city}}</li>
            </ul>
        </div> 

        <script src="js/angular.min.js"></script>

        <script>
             function SimpleController($scope) {
                $scope.emp_det = [
                    {name: 'Chinu Sahu', city: 'Bhubaneswar', age: '25'},
                    {name: 'Sanjib Pradhan', city: 'Cuttack', age: '28'},
                    {name: 'Aruna Tripathy', city: 'Jajpur', age: '26'},
                    {name: 'Debasis Das', city: 'Balasore', age: '30'}
                ];
            }
        </script>

    </body>
</html>

My angular.min.js version is : v1.4.1 我的angular.min.js版本是： v1.4.1

Error: [ng:areq] http://errors.angularjs.org/1.4.1/ng/areq?p0=SimpleController&p1=not%20a%20function%2C%20got%20undefined
I/<@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:6:416
Sb@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:21:401
Qa@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:21:1
We/this.$get</<@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:79:1
y@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:59:501
N@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:60:339
g@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:54:386
g@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:54:409
g@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:54:409
S/<@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:53:444
zc/d/</<@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:19:357
hf/this.$get</m.prototype.$eval@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:134:394
hf/this.$get</m.prototype.$apply@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:135:104
zc/d/<@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:19:315
e@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:39:17
zc/d@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:19:236
zc@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:20:30
Yd@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:18:342
@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:289:159
a@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:175:303
Gf/c@http://localhost/2015/test/AngularJS/AngularJS/js/angular.min.js:35:71


...r a=[];n(arguments,function(b){a.push(d(b))});return e.apply(b,a)}:function(a,b)...

Answer 1

Do you have any reason of omitting your module? 您是否有任何省略模块的理由？

If you want to create controller , at first you need to create a module. 如果要创建controller，首先需要创建一个模块。

(you can't use global controller in angular 1.4) （您不能在angular 1.4中使用全局控制器）

You can create angularJS module like this: 您可以像这样创建angularJS模块：

angular.module('yourModuleName',[]);

and you create a controller on this module. 然后在此模块上创建一个控制器。

like this, 像这样，

angular.module('yourModuleName').controller('yourControllerName',function($scope)
{ ... your controller logic});

I fixed your code based on this technique(above). 我基于以上技术修复了您的代码。

<html data-ng-app="myApp">
<head>
    <title>Angular JS DEMO</title>
    <style>
        .container{
            padding: 5px;
            border: 1px solid #ccc;
            margin: 2px 0px;
        }
    </style>
            <script src="angular.min.js"></script>

    <script>
            angular.module('myApp',[]);
            angular.module('myApp').controller('SimpleController',SimpleController);
            function SimpleController($scope) {
            $scope.emp_det = [
                {name: 'Chinu Sahu', city: 'Bhubaneswar', age: '25'},
                {name: 'Sanjib Pradhan', city: 'Cuttack', age: '28'},
                {name: 'Aruna Tripathy', city: 'Jajpur', age: '26'},
                {name: 'Debasis Das', city: 'Balasore', age: '30'}
            ];
        }
    </script>
</head>
<body>
     <div class="container" data-ng-controller="SimpleController">
        <h3>Adding a Simply Controller</h3>
        Name : <input type="text" data-ng-model="textbox_emp" /> {{textbox_emp}}
        <br>
        <ul>
            <li data-ng-repeat="emp2 in emp_det">{{emp2.name}} - {{emp2.city}}</li>
        </ul>
    </div> 
</body>

I hope you understand it! 希望你能理解！

If you are new to angularJS, I recommend the book called "AngularJS Novice to Ninja". 如果您是angularJS的新手，我建议您读一本名为“ AngularJS初学者到忍者”的书。

Give it a try! 试试看！

Answer 2

Global controller not valid for angular 1.3 or above 全局控制器对于角度1.3或更高版本无效

use modules:- <html data-ng-app="my"> 使用模块：- <html data-ng-app="my">

angular.module('my',[]).controller('SimpleController',function($scope) {
});

Here is plunker 这是pl子

Doc 文件

AngularJS ng-controller在v1.4.1中不起作用

问题描述

2 个解决方案

解决方案1
5 已采纳 2015-07-02 13:41:54

解决方案2
3 2015-07-02 13:31:00

AngularJS ng-controller在v1.4.1中不起作用

问题描述

2 个解决方案

解决方案1 5 已采纳 2015-07-02 13:41:54

解决方案2 3 2015-07-02 13:31:00

解决方案1
5 已采纳 2015-07-02 13:41:54

解决方案2
3 2015-07-02 13:31:00