javascript - 第二个应用程序无法在 Angular JS 中运行

标签 javascript angularjs ng-controller ng-app

您好,我是 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>

最佳答案

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

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other

关于javascript - 第二个应用程序无法在 Angular JS 中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42859179/

相关文章:

javascript - 如何切换菜单 onclick

javascript - 如何使用多个观察者过滤 VueJS 中的列表

javascript - AngularJS 卡片轮播 : return card to the end of array

angularjs - AngularJS 中指令隔离范围与 ng-repeat 范围

javascript - 在我的 Controller 中,我有名为 "chiliClick"的函数。为什么不调用呢?

javascript - 回调/范围理解

javascript - 来自节点js的sqlite不返回结果

javascript - 隐藏 HTML 标签上的溢出使浏览器跳转到页面顶部

javascript - 仍然让 Controller 不是函数,未定义,而我没有全局定义 Controller

angularjs - 将 AngularJS 范围变量从指令传递到 Controller 的最简单方法?