Question

我在menu.js中有一个这样的菜单控制器：

var app = angular.module('Menu', []);
app.controller('MenuController', function ($scope) {
$scope.items = [
    {
        "id": "1",
        "menuKey": "brandConfig",
        "menuName": "配置",
        "href": "",
        "subItems": [
            {
                "id": "11",
                "menuName": "服务",
                "menuKey": "ser",
                "href": ""
            }
        ]
    }
]
});

和A.js中的IndexController：

var app = angular.module('Index', ['ngSanitize','']);
app.controller('IndexController', function ($scope, $http) {
});

和B.js中的SecondController：

var app = angular.module('Index', ['ngSanitize','']); app.controller('SecondController', function ($scope, $http) { });

当我请求页面localhost：8080 / A时，它将加载A.js＆amp;＆amp; menu.js，请求localhost：8080 / B，它将加载B.js＆amp;＆amp; menu.js.

该页面包含页眉和页脚，header.html如下：

<div class="container-fluid">
<div class="row">
    <div class="col-md-2">
        <ul id="main-nav" class="nav nav-tabs nav-stacked" style=""  ng-app="Index" ng-controller="MenuController">
            <li id="{{$index}}" onclick="handleMenu()" ng-repeat="item in items">
                <a href="#collapse{{item.id}}" class="nav-header collapsed" data-toggle="collapse">
                    <i class="glyphicon glyphicon-cog"></i>
                    {{item.menuName}}
                    <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                </a>
                <ul id="collapse{{item.id}}" class="nav nav-list collapse secondmenu" style="height: 0px;">
                    <li id="subItem.id" ng-repeat="subItem in item.subItems" >
                        <a href="{{subItem.href}}">
                            <i class="glyphicon glyphicon-asterisk"></i>
                            {{subItem.menuName}}
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="main" class="col-md-10">
        <#setting number_format="#.##" />
        <#setting date_format="yyyy-MM-dd" />

A.ftl：

<#include "/WEB-INF/pages/header.html" />
<div ng-app="Index" ng-controller="IndexController" ng-cloak>
<div class="panel panel-default">
</div>

<div class="panel panel-default" ng-cloak>
    <div class="panel-heading">
        <h3 class="panel-title">服务项目审核</h3>
    </div>
    </div>
</div>
<#include "/WEB-INF/pages/frameFooter.html" />

当我请求A时，它会加载header.html。那么在这种情况下如何在一个页面中使用两个控制器？

Answer 1

您应该使用StateProvider，以便您可以像这样定义状态：

angular.module('modulename').config(function($stateProvider){
$stateProvider.state('menu',
{
   templateUrl: "partials/menu.html",
   url: "/menu",
   controller: "MenuController"
})
$stateProvider.state('view1',
{
   templateUrl: "partials/view1.html",
   url: "/menu",
   controller: "FirstController"
 })
 $stateProvider.state('view2',
 {
    templateUrl: "partials/view2.html",
    url: "/menu",
    controller: "SecondController"
 })
 });

 angular.module('modulename')
   .controller('MenuController', function MenuController($scope){...})
   .controller('FirstController', function FirstController($scope){...})
   .controller('SecondController', function SecondController($scope){...})

如何在一个页面中定义多应用程序和多个控制器？

1 个答案: