页面上的多个 ng-app 指令 [英] Multiple ng-app directives on a page

问题描述

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

我看到有人说你只能在你的页面上使用一个 ng-app 指令......这是真的吗?说每个视图一个 ng-app 指令"是否最准确?

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

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

var searchModj = angular.module('searchModule', []);var 控制器 = {};控制器.SearchList = 函数($scope){$scope.coworkers = [{名称:'乔鲍勃'，城市:'乌克兰'}，{名称:'Adam Blobnovski'，城市:'洛根'}，{名称:'卡洛斯桑切斯'，城市:'Deerbushle'}，{名称:'Martin Kellerweller'，城市:'Uptown'}，{名称:'John Doe'，城市:'纽约市'}];};searchModj.controller(控制器)；var FruitModj = angular.module('fruiter', []);控制器.SomeFruit = 函数($scope){$scope.fruits = ['apple', 'banana', 'pear'];};FruitModj.controller(控制器)；

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

<div ng-controller="搜索列表">姓名:<br/><input type="text" ng-model="name"/><br/><ul><li ng-repeat="coworker in coworkers | filter:name">{{ coworker.name }} - {{ coworker.city }}</li><p>您正在搜索 <em>{{ name }}</em></p>

<div ng-app="水果机"><div ng-controller="SomeFruit"><ul><li ng-repeat="水果中的水果">{{水果}}</li>

我认为因为它在文档中排在第一位，所以我的searchModule"应用程序可以工作，而第二个应用程序则不能.当我注释掉第一个应用程序时，第二个应用程序有效.所以看起来我正在证实我最不幸的怀疑.无论如何......如果是这种情况，那么我可以记住的最佳方法是使我的项目中的功能尽可能模块化?

解决方案

你只需要一个 ng-app 在一个页面上，但你可以插入你的其他模块作为主 的依赖项ng-app 模块.

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

这将公开您在 'searchModule'

中的所有指令、控制器等

I want to be able to use multiple ng-app="{angular.module}" directives on one page. I want to do this to make the bits of my app more modular. I figure, if I can create angular modules and plug several of them into one document, I could take those modules and plug them into other projects easily.

I have seen people say that you can only use one ng-app directive on your page... is this true? Is it most accurate to say, "one ng-app directive per view"?

I hope this is not the case, or if it is the case that there is still a best way to achieve a high degree of abstract modularity.

Here are my modules/apps and their controllers...

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);

Ok, now here is the relevant part of my markup...

<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>

I think because it comes first in the document, my "searchModule" app works and the second app does not. When I comment out the first app, the second works. So it looks like I'm confirming my most unfortunate suspicions. Regardless... if this is the case, then what is the best approach I can bear in mind to make the functionality on my projects as modular as possible?

解决方案

you only want one ng-app on a page, but you can insert your other modules as dependencies of the main ng-app module.

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

This will expose any directives , controllers etc you have in your 'searchModule'

这篇关于页面上的多个 ng-app 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！