如何识别两个应用程序 / 模块 angular 在一页？

我正在努力添加两个 angular 应用程序 / 每页模块。
在 fiddles 下面可以看到代码中提到的第一个模块始终是 html, 将正常工作，而第二个未被识别 angular.

在那里面
http://jsfiddle.net/qmNvq/109/
我们只能执行方法
doSearch2

, 而在这方面
http://jsfiddle.net/qmNvq/108/
只有方法
doSearch

正常工作。

我正在寻找一种正确地放置两个模块的方法 angular 在一页。
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    喜特乐

    赞同来自:

    只有一个应用程序 AngularJS 可以为每个文档自动加载 HTML. 第一的 ngApp, 在文档中发现将用于确定自动下载作为应用程序的根元素。 要在文档中启动多个应用程序 HTML, 您必须使用手动下载它们 angular.bootstrap. AngularJS 申请不能互相投资。
    --
    http://docs.angularjs.org/api/ng.directive:ngApp
    另外

    https://groups.google.com/d/ms ... eGZwJ
    http://docs.angularjs.org/api/angular.bootstrap
    2021-03-21 0 0
    分享

    喜特乐

    赞同来自:

    我创建了一个没有限制的替代指令
    ngApp

    . 它被称为
    ngModule

    . 这就是使用它时代码的样子：


    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>


    您可以获取源代码：

    http://www.simplygoodcode.com/ ... dule/
    /

    实质上，这是内部使用的代码 AngularJS 没有限制。
    2021-03-21 0 0
    分享

    小姐请别说爱

    赞同来自:

    你为什么要使用一些 [ng-app] ? 只要 Angular 它恢复使用模块，您可以使用使用多个依赖项的应用程序。

    Javascript

    :


    // setter syntax -> initializing other module for demonstration
    
angular.module/'otherModule', []/;
    

    
angular.module/'app', ['otherModule']/
    
.controller/'AppController', function // {
    
 // ...do something
    
}/;
    

    
// getter syntax
    
angular.module/'otherModule'/
    
.controller/'OtherController', function // {
    
 // ...do something
    
}/;


    HTML

    :


    <div ng-app="app">
    
<div ng-controller="AppController">...</div>
    
<div ng-controller="OtherController">...</div>
    
</div>


    EDIT

    请记住，如果要在控制器内使用控制器，则必须使用语法 controllerAs, 例如：


    <div ng-app="app">
    
<div ng-controller="AppController as app">
    
<div ng-controller="OtherController as other">...</div>
    
</div>
    
</div>
    2021-03-21 0 0
    分享

    八刀丁二

    赞同来自:

    您可以下载多个应用程序。 angular, 但：

    1/ 您需要手动下载它们

    2/ 你不应该使用 "document" 作为根，但包含接口的节点 angular, 到：


    var todoRootNode = jQuery/'[ng-controller=TodoController]'/;
    
angular.bootstrap/todoRootNode, ['TodoApp']/;


    这是安全的。
    2021-03-21 0 0
    分享

    董宝中

    赞同来自:

    指导 bootstrapping 两个模块都将工作。 看那个


     IN HTML 
    
<div id="dvFirst">
    
<div ng-controller="FirstController">
    
<p>1: {{ desc }}</p>
    
</div>
    
</div>
    
<div id="dvSecond">
    
<div ng-controller="SecondController ">
    
<p>2: {{ desc }}</p>
    
</div>
    
</div>
    

    

    

    
// IN SCRIPT 
    
var dvFirst = document.getElementById/'dvFirst'/;
    
var dvSecond = document.getElementById/'dvSecond'/;
    

    
angular.element/document/.ready/function// {
    
 angular.bootstrap/dvFirst, ['firstApp']/;
    
 angular.bootstrap/dvSecond, ['secondApp']/;
    
}/;


    这是柱塞的链接
    http://plnkr.co/edit/1SdZ4QpPf ... eview
    NOTE:

    在 html 不是
    ng-app

    . 而是使用
    id

    .
    2021-03-21 0 0
    分享

    诸葛浮云

    赞同来自:

    我做了 POC 适用于应用程序 Angular, 使用多个模块和路由器套接字将嵌套应用程序附加到一个页面应用程序中。
    您可以获取源代码：
    https://github.com/AhmedBahet/ng-sub-apps
    我希望这个能帮上忙
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved