AngularJS初学者：ng-controller无法正常工作

发布时间：2020-12-17 09:57:18 所属栏目：安全来源：网络整理

导读：我只想试着了解AngularJS的基础知识.我尝试编写一个简单的MVC应用程序,但控制器似乎没有工作.该文件可以找到刚找到的有角度的lib,我已经通过排除’ng-controller’进行了测试. !DOCTYPE htmlhtml ng-apphead script src='js/lib/angular.js'/script script /

我只想试着了解AngularJS的基础知识.我尝试编写一个简单的MVC应用程序,但控制器似乎没有工作.该文件可以找到刚找到的有角度的lib,我已经通过排除’ng-controller’进行了测试.

<!DOCTYPE html>
<html ng-app>
<head>
    <script src='js/lib/angular.js'></script>
    <script>
        // controller
        function MyFirstCtrl($scope) {
            // model
            var employees = ['Christopher Grant','Monica Grant','Christopher
            Grant','Jennifer Grant'];

            $scope.ourEmployees = employees;
        }
    </script>
</head>
<body ng-controller='MyFirstCtrl'>
    <!-- view -->
    <h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>

编辑：
错误日志说明如下：

Uncaught SyntaxError: Unexpected token ILLEGAL,line 9
Uncaught SyntaxError: Unexpected token {,line 19
Error: [ng:areq] Argument 'MyFirstCtrl' is not a function,got undefined

EDIT2：我把代码更改为：

<!DOCTYPE html>
<html ng-app='MVCExample'>
<head>
    <script src='js/lib/angular.js'></script>
    <script>
        var app = angular.module('MVCExample',[]);

        // controller
        app.controller("MyFirstCtrl",function($scope) {

            // model
            var employees = ['Christopher Grant','Christopher Grant','Jennifer Grant'];

            $scope.ourEmployees = employees;
        });
    </script>
</head>
<body ng-controller='MyFirstCtrl'>
    <!-- view -->
    <h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>

事实证明,我所拥有的’雇员’阵列是非法的,因为我有一个字符串条目分为两行.以上工作.我正在使用的初学者书必须过时,这是不幸的.

如果您正在使用angularjs 1.3版本,那么您无法像上面那样声明全局控制器.

你应该如下初始化.

<div ng-app="appname" ng-controller="MyFirstCtrl">
var app = angular.module('appname',[]);
app.controller('MyFirstCtrl',function(){
   //controller code here
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!