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

问题描述

我希望能够使用多个NG-应用={} angular.module在一个页面上的指令。我想这样做是为了让我的应用程序的位更加模块化。我想，如果我可以创造角模块和插件其中几个到一个文件，我可以把这些模块，并将其插入到其他项目容易。

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.

我看到有人说，你只能使用一个NG-应用指令在页面上...这是真的吗？它是最准确的说，每次浏览一次NG-程序指令？

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>

我想是因为它是第一位的文档中，我的searchModule应用的工作​​原理与应用第二不。当我注释掉第一个应用程序，第二个作品。因此，它看起来像我确认我最不幸的怀疑。不管......如果是这样的话，那么什么是我能记住，最好的办法，使我的项目的功能尽可能模块化？

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?

推荐答案

您只需要一个 NG-应用在页面上，但你可以插入其它模块的依赖主 NG-应用程序模块。

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

这会暴露任何指示，你有控制器等你的'searchModule

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

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