为什么从不调用角度控制器?

时间:2014-09-05 14:16:36

标签: angularjs angularjs-routing

检查器中的所有内容都很好,我没有看到控制台错误。但我期待info.html部分加载。此时,范围内未使用任何数据。但是infoController的代码永远不会被执行。你看到我已经在那里放了一个调试器线,它永远不会到达那里。

我的问题是为什么InfoController不会被调用?

主要外壳页面

            <!DOCTYPE html>
        <html lang="en" ng-app="adminUI">

        <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link type="text/css" rel="stylesheet" media="all" href="/admin/css/bootstrap/core/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" media="all" href="/admin/css/attivio-global.css">
        </head>

        <body>
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                            </button>
                            <a href="#/"><img class="atv-image atv-margin-top-10 atv-navbar-logo" src="/img/attivio-navbar-logo.png"></a>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav" data-ng-controller="NavbarController">
                                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">System <span class="caret"></span></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li role="presentation" class="dropdown-header">System Management</li>
                                        <li><a href="#">Connectors</a></li>
                                        <li><a href="#">Indexes</a></li>
                                        <li role="presentation" class="divider"></li>
                                        <li role="presentation" class="dropdown-header">Workflows</li>
                                        <li><a href="#">Ingest</a></li>
                                        <li><a href="#">Query</a></li>
                                        <li><a href="#">Response</a></li>
                                        <li><a href="#">Palette</a></li>
                                        <li role="presentation" class="divider"></li>
                                        <li role="presentation" class="dropdown-header">System Information</li>
                                        <li data-ng-class="{'active':getClass('/info')}"><a href="#/info">General(System)</a></li>
                                        <li><a href="#">Configuration</a></li>
                                        <li data-ng-class="{'active':getClass('/properties')}"><a href="#/properties">Properties</a></li>
                                        <li><a href="#">Environment</a></li>
                                    </ul></li>
                                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <span class="caret"></span></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">General(System)</a></li>
                                        <li><a href="#">Configuration</a></li>
                                        <li><a href="#">Properties</a></li>
                                        <li><a href="#">Environment</a></li>
                                    </ul></li>
                            </ul>
                            <form class="navbar-form navbar-right" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control input-sm" placeholder="Search">
                                </div>
                                <button type="submit" class="btn btn-default btn-sm">Go</button>
                            </form>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container -->
                </div>

            <script type="application/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
            <script type="application/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
            <script type="application/javascript" src="/admin/js/bootstrap/bootstrap.min.js"></script>
            <script type="application/javascript" src="resources/js/angular.min.js"></script>
            <script type="application/javascript" src="resources/js/angular-route.js"></script>

            <script src="app.js"></script>  
            <script src="info/controllers/controllers.js"></script>
            <script src="info/services/infoService.js"></script>
            <script src="properties/controllers/controllers.js"></script>
            <script src="properties/services/propertiesService.js"></script>


        </body>

        </html>

appjs

            var app = angular.module('adminUI', ['ngRoute']);

            //This configures the routes and associates each route with a view and a controller
            app.config(function ($routeProvider) {
                $routeProvider
                    .when('/info',
                        {
                            controller: 'InfoController',
                            templateUrl: '/info/partials/info.html'
                        })
                    .when('/properties',
                        {
                            controller: 'PropertiesController',
                            templateUrl: '/properties/partials/properties.html'
                        })
                    .otherwise({ redirectTo: '/info' });
            });

            app.controller('NavbarController', function ($scope, $location) {
                $scope.getClass = function (path) {
                    if ($location.path().substr(0, path.length) == path) {
                        return true
                    } else {
                        return false;
                    }
                }
            });

信息控制器

            app.controller('InfoController', function ($scope, infoService) {
                $scope.sysInfo = [];

                init();

                function init() {
                    debugger;
                    $scope.sysInfo = infoService.getInfo();
                }
            }); 

属性控制器

            app.controller('PropertiesController', function($scope, propertiesService) {
                $scope.properties = [];

                init();

                function init() {
                    $scope.properties = propertiesService.getProperties();
                }
            });

服务

            app.service('propertiesService', function () {
                this.getProperties = function () {
                    return properties; //ajax call
                };

                var properties = ["a","b"];
            });

            app.service('infoService', function () {
                this.getInfo = function () {
                    return info; //ajax call
                };

                var info = ["a","b"];
            });

info.html模板

            <div class="info view">
            <p> info test </p>
            </div>

属性模板

            <div class="properties view">
            <p> properties test </p>
            </div>

这是我的目录结构

http://postimg.org/image/5qgn25b5n/

0 个答案:

没有答案