单页上的两个模块无法在角度js中工作

I am new to angular js . I have two modules first2a,first22. Each modules have one controller model1 and model2.

我是棱角分明的新手。我有两个模块first2a,first22。每个模块都有一个控制器model1和model2。

Below is my Html code

下面是我的Html代码

<!DOCTYPE html>
    <html >
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
            <script type="text/javascript" src="globe/script/angular.js"></script>
            <script type="text/javascript" src="globe/script/mainscope1.js"></script>
            <script type="text/javascript" src="globe/script/angular-route.js"></script>
            <title>
                Html5 All in One
            </title>
        </head>
        <body >
            <!-- MAin page -->
                <div  ng-app="first22" id="maincontainer" > 
                        <div ng-controller="model1">{{message}}</div>
                </div>
            <!-- MAin page End-->   
            <!-- Interactivity page -->     
                <div id="Interactive_content" ng-app="firsta" >
                    <div ng-controller="model2">{{message}}</div>
                </div>
            <!-- Interactivity page End-->          
        </body>
    </html>

mainscope1.js

var first2 = angular.module('first22', []);

    first2.controller('model1',function($scope)
    {
        $scope.message="aaaaaaa";

    })

var first2a=angular.module('firsta',[]);

    first2a.controller('model2',function($scope)
    {
        $scope.message="aaaaaaa1";

    })

Can anyone explain why firsta module is not working here. Thanks in advance

任何人都可以解释为什么firsta模块不能在这里工作。提前致谢

3 个解决方案

#1

Try using angular boostrap , to happen when the document is ready:

尝试使用角度boostrap,在文档准备好时发生:

angular.element(document).ready(function() { 
    angular.bootstrap(document.getElementById('maincontainer'), ['first22']);
    angular.bootstrap(document.getElementById('Interactive_content'), ['firsta']);
});

Check this fiddle

检查这个小提琴

#2

You can only use ng-app once per page. Are you trying to create two separate web applications side by side on this page, or are you only trying to have two controllers within a single application?

每页只能使用一次ng-app。您是否尝试在此页面上并排创建两个单独的Web应用程序,或者您只是尝试在单个应用程序中创建两个控制器?

If you really want them to be a single application (which is what you normally would want), you set ng-app so that both ng-controller directives are inside it. For example, you can set ng-app on the html-tag, the body-tag or a div that wraps it.

如果你真的希望它们是一个单独的应用程序(这是你通常想要的),你可以设置ng-app,以便两个ng-controller指令都在其中。例如,您可以在html-tag,body-tag或包装它的div上设置ng-app。

<!DOCTYPE html>
    <html >
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
            <script type="text/javascript" src="globe/script/angular.js"></script>
            <script type="text/javascript" src="globe/script/mainscope1.js"></script>
            <script type="text/javascript" src="globe/script/angular-route.js"></script>
            <title>
                Html5 All in One
            </title>
        </head>
        <body ng-app="myAngularApplication">
            <!-- MAin page -->
                <div id="maincontainer" > 
                        <div ng-controller="model1">{{message}}</div>
                </div>
            <!-- MAin page End-->   
            <!-- Interactivity page -->     
                <div id="Interactive_content" >
                    <div ng-controller="model2">{{message}}</div>
                </div>
            <!-- Interactivity page End-->          
        </body>
    </html>

And the javascript would be:

而javascript将是:

var first2 = angular.module('myAngularApplication', []);

    first2.controller('model1',function($scope)
    {
        $scope.message="aaaaaaa";

    });

    first2.controller('model2',function($scope)
    {
        $scope.message="aaaaaaa1";

    });

OR, if you want to create two fully separated applications on the same page, you need to bootstrap them manually without using ng-app. Please see this SO question for details on how to do that.

或者,如果要在同一页面上创建两个完全独立的应用程序,则需要手动引导它们而不使用ng-app。有关如何执行此操作的详细信息,请参阅此SO问题。

#3

Possible duplicate of this question: https://*.com/a/12864137/1177295

可能重复此问题:https://*.com/a/12864137/1177295

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. -- http://docs.angularjs.org/api/ng.directive:ngApp

每个HTML文档只能自动引导一个AngularJS应用程序。文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序,必须使用angular.bootstrap手动引导它们。 AngularJS应用程序不能互相嵌套。 - http://docs.angularjs.org/api/ng.directive:ngApp

#1