Question

我正在学习Angular JS，我试图看看数据绑定在Angular中是如何工作的所以我编码了这个：

    <!DOCTYPE html>
<html ng-app>
    <head>
        <title>Angular JS Tutorials</title>
        <script src="angular.min.js"></script>
        <script src="script5.js"></script>
    </head>
    <body ng-app="myModule">
        <div ng-controller="myController">
            <table>
                <tr>
                    <td>First Name:</td>
                    <td><input type="text" ng-model="employee.firstName"/></td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input type="text" ng-model="employee.lastName"/></td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td><input type="text" ng-model="employee.gender"/></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>First Name:</td>
                    <td>{{ employee.firstName }}</td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td>{{ employee.lastName }}</td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td>{{ employee.gender }}</td>
                </tr>
            </table>
        </div>
    </body>
</html>

但是每当我加载页面时问题根本不起作用！

这是script5.js：

var myApp = angular
            .module("myModule",[]);
            .controller("myController",function($scope){
                var employee = {
                    firstName: "Ben",
                    lastName: "Hastings",
                    gender: "Male"
                };
                $scope.employee = employee;
            });

但是我在同一目录中也包含了angular.min.js所需的文件。

那么这里的问题是什么？

Answer 1

更改

这

<html ng-app>

要

<html>

AND CONTROLLER AS

myApp.controller("myController",function($scope){
                var employee = {
                    firstName: "Ben",
                    lastName: "Hastings",
                    gender: "Male"
                };
                $scope.employee = employee;
            });

因为您正在声明身体内的模块。

<强>样本

＆＃13;

var myApp = angular.module("myModule",[]);
myApp.controller("myController",function($scope){
                var employee = {
                    firstName: "Ben",
                    lastName: "Hastings",
                    gender: "Male"
                };
                $scope.employee = employee;
            });

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Angular JS Tutorials</title>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
    <body ng-app="myModule">
        <div ng-controller="myController">
            <table>
                <tr>
                    <td>First Name:</td>
                    <td><input type="text" ng-model="employee.firstName"/></td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input type="text" ng-model="employee.lastName"/></td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td><input type="text" ng-model="employee.gender"/></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>First Name:</td>
                    <td>{{ employee.firstName }}</td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td>{{ employee.lastName }}</td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td>{{ employee.gender }}</td>
                </tr>
            </table>
        </div>
    </body>
</html>

＆＃13;

Answer 2

你是声明ng-app旁边的html声明，也是在body.your角度实例加载到head中，所以它适用于body部分所以，在代码生效后删除顶部的ng-app。

Angular JS不显示结果

2 个答案: