2

嗨，我是 Angular 新手，我正在尝试在单个 HTML 文件中创建 2 个应用程序，但我没有获得第二个应用程序的输出，并且我得到了第一个应用程序的正确输出。谁能告诉我我在哪里做错了？代码如下

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html>
        <head>
            <title>The example for angular</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
            <style>
                input.ng-invalid {
                    background-color: lightcyan;
                }
    
            </style>
        </head>
        <body>
            <div ng-app="myApp">
                <div ng-controller="hello">
                    <p>{{firstname}}</p>
                </div>
                <div ng-init="Akshay=[
                            {firstname:'Sandeep',place:'mangalore'},
                    {firstname:'sirish', place:'haridwar'},
                    {firstname:'krish', place:'mathura'}]">
                    <div ng-repeat="name in Akshay">
                        {{name.firstname + ' ' + name.place}}
                    </div>
                </div>
                <div class="ang"></div>
                <form name="myForm">
                    <input type="email" name="emaild" ng-model="text">
                    <span ng-show="myForm.emaild.$error.email">Please enter the proper email</span>
                </form>
                <input type="text" ng-model="mytext" required>
            </div>
    
            <div ng-app="Appname" ng-controller="personCtrl">
                <input type="text" ng-model="firstName">
                <input type="text" ng-model="lastName">
                <p>His firstname was{{firstName}}</p>
                <p>His second name was {{lastName}} </p>
                <h1> His name was {{fullname()}} </h1>
    
            </div>
            <script>
                var app = angular.module("myApp", []);
                app.controller("hello", function ($scope) {
                    $scope.firstname = "Akshay";
                });
                app.directive("ang", function () {
                    return {
                        restrict: "C",
                        template: "This is a great time to be alive"
                    };
                });
    
                var appsec = angular.module('Appname', []);
                appsec.controller("second", function ($scope) {
                    $scope.firstName = "Bhagath";
                    $scope.lastName = "Singh";
                    $scope.fullname = function () {
                        return $scope.firstName + " " + $scope.lastName;
                    };
                });
    
    
            </script>
        </body>
    </html>

4

3 回答 3

3

您不能在单个 html 文件中引导两个模块。根据文档

每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以自动引导为应用程序。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。AngularJS 应用程序不能相互嵌套

于 2017-03-17T13:48:04.793 回答
2

您可以使用手动引导方法同时引导两个模块

修改两个 boostrap 行以在文档准备好时发生：

angular.element(document).ready(function() { 
    angular.bootstrap(document.getElementById('app1'), ['app1']);
    angular.bootstrap(document.getElementById('app2'), ['app2']);
});

以这种方式修改您的 plnkr 时，两个应用程序都开始正常工作。

现场演示：https ://jsfiddle.net/samirshah1187/w7gv56t5/

于 2017-03-17T14:24:15.320 回答
0

正如@Samir 所说，我们可以使用手动引导方法同时引导两个模块，我们需要像这样定义 id <div ng-app="myApp" id="myId"> <div ng-app="Appname" ng-controller="personCtrl" id="personId">，

然后在脚本的末尾添加这些行

angular.bootstrap(document.getElementById('myId'), ['myApp']); angular.bootstrap(document.getElementById('personId'), ['Appname']);

我们需要引导模块以在同一页面中有多个 ng-app。

于 2018-02-21T08:19:55.433 回答