Question

我正在尝试在不同的HTML页面中使用不同的AngularJS模块，但只加载了一个（坦率地说，我认为只加载了一个，但问题可能在于其他问题）。简单地说明这个例子的逻辑： index.html - 包含2个面板的主页面：左侧边栏菜单和包含相关信息的主面板。单击菜单向服务器发出请求，并重定向响应主面板中相关HTML的数据。

请找到以下代码：

index.html（包含所有观点的页面）

<!DOCTYPE html>
<html ng-app="indexPageModule">
<head lang="en">
    <meta charset="UTF-8">
    <title>Navigation Panel</title>
    <link href="/resources/css/bootstrap.css" rel="stylesheet"/>
    <link href="/resources/css/bootstrap-theme.css" rel="stylesheet"/>
    <link href="/resources/css/index-style.css" rel="stylesheet"/>
    <script src="/resources/js/angular.js"></script>
    <script src="/resources/js/angular-route.js"></script>
    <script src="/resources/js/index_page_module.js"></script>
    <base href="/">
</head>
<body ng-controller="indexPageRootController">
<div class="container-fluid">
    <div id="static-header" class="row">
        <nav role="navigation" class="navbar navbar-static-top custom-navbar row-bottom-margin">
        </nav>
    </div>
    <div class="row">
        <div id="navigation-panel" class="col-lg-2 sidebar">
            <ul class="nav nav-list" ng-repeat="item in treeNavigationMenu">
                <li><label class="tree-toggler nav-header">{{item.parent}}</label>
                    <ul class="nav nav-list tree" ng-repeat="child in item.children">
                        <li><a href="{{child.urlPattern}}" ng-click="requestMainPanelData(child.urlPattern)">{{child.childName}}</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="main-panel" class="col-lg-10 main-panel" ng-view>
        </div>
    </div>
</body>
</html>

index_module.js

angular.module("indexPageModule", ['ngRoute'])
    .config(function($routeProvider, $locationProvider){
        $locationProvider.html5Mode(true);
        $routeProvider.when("/limits_list", {
            templateUrl: "resources/static/limits_list.html"
        }).when("/limits_upload", {
            templateUrl: "resources/static/limits_upload.html"
        }).when("/exposures_list", {
            templateUrl: "resources/static/exposures_list.html"
        }).when("/exposures_upload", {
            templateUrl: "resources/static/exposures_upload.html"
        }).when("/breaches_list", {
            templateUrl: "resources/static/breaches_list.html"
        }).otherwise({
            templateUrl: "resources/static/default_main_page.html"
        })
    })
    .provider("navigationPanelRequestService", function(){
        return {
            $get : function($http) {
                return {
                    requestJson : function(pageUrl){
                        $http.get(pageUrl).success(function(response){
                            return response.data;
                        });
                    }
                }
            }
        }
    })
    .service("sharedMainPageData", function(){
        var sharedData;
        return {
            getMainPageData : function(){
                return sharedData;
            },
            setMainPageData : function(mainPageJson){
                sharedData = mainPageJson;
            }
        }
    })
    .controller("indexPageRootController", function($scope, $http, $document, navigationPanelRequestService, sharedMainPageData){
        $scope.treeNavigationMenu = {};
        $scope.requestMainPanelData = function(pageUrl){
            var retrievedData = navigationPanelRequestService.requestJson(pageUrl);
            sharedMainPageData.setMainPageData(retrievedData);
        };
        angular.element($document).ready(function(){
            $http.get("/navigation_menu/navigation_tree.json")
                .success(function(response){
                    $scope.treeNavigationMenu = response;
                });
        });
});

limits_list.html（应显示从服务器检索JSON的页面）

<!DOCTYPE html>
<html ng-app="limitsListModule">
<head lang="en">
    <meta charset="UTF-8">
    <title>Limits List</title>
    <link href="/resources/css/bootstrap.css" rel="stylesheet"/>
    <link href="/resources/css/bootstrap-theme.css" rel="stylesheet"/>
    <link href="/resources/css/index-style.css" rel="stylesheet"/>
    <script src="/resources/js/angular.js"></script>
    <script src="/resources/js/angular-route.js"></script>
</head>
<body ng-controller="limitsListController">
    <div class="container">
        <div class="row">{{limitsGridData.gridData}}</div>
    </div>
</body>
</html>

limits_list_module.js（应该为limits_list.html处理模型的模块）

angular.module("limitsListModule", ['indexPageModule'])
    .controller("limitsListController", function($scope, sharedMainPageData){
        $scope.limitsGridData = function(){
            if (angular.isDefined(sharedMainPageData.getMainPageData())){
                var jsonData = sharedMainPageData.getMainPageData();
                console.log("Retrieved data is here - " + jsonData.gridData);
                return jsonData;
            }
        }
    });

我尝试调试JS端 - 因此从服务器检索JSON并存储在 sharedMainPageData （index_page_module.js）服务中。此 sharedMainPageData 应该可以在 limitsListModule 的 limitsListController 中使用，但它不会。更多内容未经过调试。即使我尝试在limit_list.html上的ng-controller指令中输入不正确的控制器名称，也没有任何反应（但应该抛出异常）。所以我认为问题出在模块引导中。我试图解决这个问题：

我尝试通过angular.bootstrap（）
我尝试在limit_list.html中定义模块而不是分开的.js文件
我尝试使用不同的aproaches来玩服务器调用：回调和承诺对象

互联网搜索没有帮助。我是AngularJS的新手，认为问题很简单，但由于缺乏经验，我无法解决。如果您对我的代码有任何疑问，请告诉我。感谢。

Answer 1

更改<div class="row">{{limitsGridData.gridData}}</div>以调用此函数<div class="row">{{limitsGridData().gridData}}</div> 请参阅此处的差异示例http://codepen.io/mkl/pen/YqBRay/

Answer 2

洗液是：

-inject limitsListModule ，定义 indexPageModule 并描述控制器

$routeProvider.when("/limits_list", {
        templateUrl: "resources/static/limits_list.html",
        controller: "limitsListController"

- 通过异步调用从服务器正确检索JSON我必须纠正$ http-call：

.provider("navigationPanelRequestService", function(){
        return {
            $get : function($http) {
                return {
                    requestJson : function(pageUrl){
                        return $http.get(pageUrl);
                    }
                }
            }
        }
    })

.controller("indexPageRootController", function($scope, $http, $document, navigationPanelRequestService, sharedMainPageData){
        $scope.treeNavigationMenu = {};
        $scope.requestMainPanelData = function(pageUrl){
            asyncRequestResult.then(function(response){
                sharedMainPageData.setMainPageData(response.data);
            },
            function(error){
                console.error("Sorry mate the shit has happened" + error.status);
                console.error("Sorry mate the shit has happened" + error.statusText);
            });
        };

未加载AngularJS模块

2 个答案: