页面上有多个ng-app指令

Question

我希望能够在一页上使用多个ng-app =“
{angular.module}”指令。我想这样做是为了使我的应用程序的模块更加模块化。我认为，如果我可以创建角度模块并将其中几个模块插入一个文档，则可以将这些模块轻松地插入其他项目。

我见过有人说您只能在页面上使用一个ng-app指令…是真的吗？说“每个视图一个ng-app指令”是否最准确？

我希望不是这样，或者如果情况是，仍然存在实现高度抽象模块化的最佳方法。

这是我的模块/应用程序及其控制器…

var searchModj = angular.module('searchModule', []);


var controllers = {};

controllers.SearchList = function ($scope){

    $scope.coworkers = [
            {name: 'Joe Bob', city: 'Ukrainia'},
            {name: 'Adam Blobnovski', city: 'Logan' },
            {name: 'Carlos Sanchez', city: 'Deerbushle'},   
            {name: 'Martin Kellerweller', city: 'Uptown'},
            {name: 'John Doe',  city: 'New York City'}
        ];
};

searchModj.controller(controllers);



var fruitModj = angular.module('fruiter', []);



controllers.SomeFruit = function ($scope) {

    $scope.fruits = ['apple', 'banana', 'pear'];

};

fruitModj.controller(controllers);

好的，现在这是我的标记的相关部分…

<div ng-app="searchModule">

    <div ng-controller="SearchList">

        Name: 
        <br/>
        <input type="text" ng-model="name" /> 
        <br/>
        <ul>
            <li ng-repeat="coworker in coworkers | filter:name">{{ coworker.name }} - {{ coworker.city }}</li>
        </ul>

        <p>You are searching for <em>{{ name }}</em></p>


    </div>


</div>

<div ng-app="fruiter">
    <div ng-controller="SomeFruit">

        <ul>
            <li ng-repeat="fruit in fruits">{{ fruits }}</li>
        </ul>

    </div>

</div>

我认为，因为它首先出现在文档中，所以我的“
searchModule”应用有效，而第二个应用无效。当我注释掉第一个应用程序时，第二个工作。因此，看来我在证实我最不幸的猜疑。无论如何…如果是这种情况，那么我可以记住的最佳方法是使我的项目的功能尽可能模块化吗？

Answer 1

您只希望ng-app在页面上放置一个，但是您可以将其他模块作为主ng-app模块的依赖项插入。

var app=angular.module('myNgAppName', ['searchModule']);

这将公开您所拥有的所有指令，控制器等 'searchModule'