Question

请检查我的代码。

为什么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>

我的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

你有没有理由省略你的模块？

如果您想创建控制器，首先需要创建一个模块。

（你不能在角度1.4中使用全局控制器）

您可以像这样创建angularJS模块：

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

并在此模块上创建一个控制器。

像这样，

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

我根据这种技术修复了你的代码（上图）。

<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>

我希望你理解它！

如果您是angularJS的新手，我推荐名为＆＃34; AngularJS Novice to Ninja＆＃34;。

试一试！

Answer 2

全局控制器对角度1.3或以上无效

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

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

这是plunker

Doc

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

2 个答案: