Question

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

以下是我的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";

    })

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

Answer 1

尝试使用角度引导程序，在文档准备就绪时发生：

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

选中此fiddle

Answer 2

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

如果你真的希望它们是一个单独的应用程序（这是你通常想要的），你可以设置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>

javascript将是：

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

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

    });

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

    });

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

Answer 3

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

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

单页上的两个模块在角度js中不起作用

3 个答案: