2

こんにちは、Angular は初めてで、1 つの HTML ファイルで 2 つのアプリを作成しようとしていますが、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

1 つの html ファイルで 2 つのモジュールをブートストラップすることはできません。ドクによると

HTML ドキュメントごとに自動ブートストラップできる AngularJS アプリケーションは 1 つだけです。ドキュメントで最初に見つかった ngApp は、アプリケーションとして自動ブートストラップするルート要素を定義するために使用されます。HTML ドキュメントで複数のアプリケーションを実行するには、代わりに angular.bootstrap を使用して手動でブートストラップする必要があります。AngularJS アプリケーションを相互にネストすることはできません

于 2017-03-17T13:48:04.793 に答える