頁面上有多個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'任何指令，控制器等

Answer 2

ngApp指令的局限性只是指令的局限性，而不是AngularJS本身。 Angular允許您將模塊與頁面中的多個元素相關聯，甚至允許您將多個模塊與每個元素相關聯。

從您的模塊引用其他模塊將起作用。 另一種方法是使用angular.bootstrap()方法。 請參閱： https ： //stackoverflow.com/a/18583329/984780

最后，您可以創建一個類似於ngApp的指令，而不ngApp限制。 它將完全按照它在標記代碼中的方式工作。 這就是我所做的，你可以在這里得到代碼：

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

該指令稱為ngModule 。 這是一個代碼示例：

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>

Answer 3

是的，您每頁只需要一個ng-app，但您可以創建其他模塊並將其聲明為主應用程序的依賴項。

var app=angular.module('appModule'); //resuable module

var app=angular.module('myApp', ['appModule']); //in the HTML ng-app="myApp"

所以你可以在appModule中放入可重用的東西並在其他項目中使用它。 例如，我喜歡在我在其他項目中重用的模塊中放置我的路由邏輯（即根據訪問級別重新路由用戶）。

注意：您可能需要查看$ provider http://docs.angularjs.org/api/AUTO。$ provide是否要在ng的config方法中使用來自可重用（“appModule”）模塊的數據-app（“myApp”）模塊。

頁面上有多個ng-app指令

問題描述

3 個解決方案

解決方案1
19 已采納 2013-10-29 19:02:39

解決方案2
7 2014-04-06 19:47:59

解決方案3
4 2013-10-29 19:12:41

頁面上有多個ng-app指令

問題描述

3 個解決方案

解決方案1 19 已采納 2013-10-29 19:02:39

解決方案2 7 2014-04-06 19:47:59

解決方案3 4 2013-10-29 19:12:41

解決方案1
19 已采納 2013-10-29 19:02:39

解決方案2
7 2014-04-06 19:47:59

解決方案3
4 2013-10-29 19:12:41