Question

我是AngJS的新手，我正在尝试自己编写代码。我被困在一个部分。

代码：

<!DOCTYPE HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title> First page </title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    First Name: <input type="text" ng-model="person.firstName"> <br>
    Last Name: <input type="text" ng-model="person.lastName"> <br>
    <p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
</div>

<div ng-app="mApp" ng-controller="mCtrl">
    Registration number: <input type="number" ng-model="person.regNum"> <br>
    Class number: <input type="text" ng-model="person.classNum"> <br>
    <p> {{person.regNum, person.classNum}} </p>
</div>

<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
    $scope.person = {firstName:"Nikhil",lastName:"Hegde"};
    $scope.age = [20,21,22];
    });

var app1 = angular.module('mApp',[]);
app1.controller('mCtrl',function($scope) {
    $scope.person = {regNum:"122503",classNum:"12EC48"};
    });

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

我不确定第二对字段有什么问题，但你看到的输出是不正确的。

我也可以重用app变量吗？ app = angular.module（'myApp'，[]）;

我可以重复使用相同的变量'app'，而不是使用单独的'app1'变量： app = angular.module（'mApp'，[]）;

Answer 1

您应该只有一个app

<!DOCTYPE HTML>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <title> First page </title>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        First Name: <input type="text" ng-model="person.firstName"> <br>
        Last Name: <input type="text" ng-model="person.lastName"> <br>
        <p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
    </div>

    <div ng-controller="mCtrl">
        Registration number: <input type="number" ng-model="person.regNum"> <br>
        Class number: <input type="text" ng-model="person.classNum"> <br>
        <p> {{person.regNum, person.classNum}} </p>
    </div>

<script>
    var app = angular.module('myApp',[])
    .controller('myCtrl',function($scope) {
        $scope.person = {firstName:"Nikhil",lastName:"Hegde"};
        $scope.age = [20,21,22];
    })
    .controller('mCtrl',function($scope) {
        $scope.person = {regNum:"122503",classNum:"12EC48"};
    });

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

Answer 2

 ＆lt; body＆gt;＆＃xA; ＆lt; div ng-app =“myApp”＆gt;＆＃xA; ＆lt; div ng-controller =“myCtrl”＆gt;＆＃xA;名字：＆lt; input type =“text”ng-model =“person.firstName”＆gt; ＆LT峰; br＆GT;＆＃XA;姓氏：＆lt; input type =“text”ng-model =“person.lastName”＆gt; ＆LT峰; br＆GT;＆＃XA; ＆LT; p为H. {{person.firstName +“”+ person.lastName}}年龄为：{{age [0]}}＆lt; / p＆gt;＆＃xA; ＆LT; / DIV＆GT;＆＃XA;＆＃XA; ＆lt; div ng-controller =“mCtrl”＆gt;＆＃xA;注册号：＆lt; input type =“number”ng-model =“person.regNum”＆gt; ＆LT峰; br＆GT;＆＃XA;类号：＆lt; input type =“text”ng-model =“person.classNum”＆gt; ＆LT峰; br＆GT;＆＃XA; ＆LT; p为H. {{person.regNum +“”+ person.classNum}}＆lt; / p＆gt;＆＃xA; ＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

脚本文件

＆＃xA;＆＃xA ;

 ＆lt; script＆gt;＆＃xA; var app = angular.module（'myApp'，[]）;＆＃xA; app.controller（'myCtrl'，function（$ scope）{＆＃xA; $ scope.person = {'firstName'：“Nikhil”，'lastName'：“Hegde”};＆＃xA; $ scope.age = [20,21,22];＆＃xA;}）;＆＃xA;＆＃xA; app.controller（'mCtrl'，函数（$ scope）{＆＃xA; $ scope.person1 = {'regNum' ：“122503”，“classNum”：“12EC48”};＆＃xA;}）;＆＃xA;

＆＃xA;＆＃xA;

＆＃ xA;＆＃xA;

仅定义您的应用一次。您可以将多个控制器添加到ng-module。＆＃xA;希望它会很有用。

＆＃xA;

Answer 3

一个应用程序中只能有一个模块，在同一个控制器中有不同的范围变量

 var app = angular.module('myApp', []);
 app.controller("myCtrl", ["$scope", "$http",
   function($scope, $http) {
     $scope.person = {
       firstName: "Nikhil",
       lastName: "Hegde"
     };
     $scope.registration = {
       regNum: "122503",
       classNum: "12EC48"
     };
     $scope.age = [20, 21, 22];
   }
 ]);

<强> DEMO

AngularJS脚本输出中的错误

3 个答案: