Question

我有一个SPA，需要根据用户所在的路线位置显示不同的标题。看起来我的代码应该工作，但它会产生这样的错误：TypeError：undefined不是函数

我在这里缺少什么： HTML

<html lang="en" ng-app="configApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>Configuration Admin</title>

    <!-- Bootstrap CSS -->
    <link href="_/css/bootstrap.css" rel="stylesheet">
    <link href="_/css/main-styles.css" rel="stylesheet">


</head>
<body>
<div class="container">
    <!-- Header-->
       <div class="row">
           <!-- Header to be shown when a program is edited-->
           <div ng-include="'templates/headers/nav-icons.html'" ng-if="showNavIcons"></div>
           <!-- Header to be shown when Dashboard view-->
           <div ng-include="'templates/headers/nav-logo.html'" ng-if="hideNavIcons"></div>
       </div> <!-- end header -->
</div>


<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>

</body>
</html>

JS

var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])

 .config(function($routeProvider){
    $routeProvider.when('/dashboard', {
        templateUrl: 'templates/dashboard/home.html'
       // controller: 'HomeController'
        })

        .when('/organizations', {
            templateUrl: 'templates/dashboard/organizations/organizations-title.html',
            controller: 'OrganizationController',
            activetab: 'organizations'
        })


        .when('/program-details-edit', {
            templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
             controller: 'ProgramDetailsEdit'
        })
    .otherwise( {redirectTo: '/dashboard'} );
});


// Side Nav Link Controllers
configApp.controller('OrganizationController', function($scope) {});
configApp.controller('SideNavCtrl', function($scope, $location) {
    $scope.isActive = function(route) {
        return route === $location.path();
    }
});

configApp.controller('ProgramDetailsEdit', ['$scope', '$location', '$route', function($scope, $route, $location) {
    $scope.showNavIcons = $location.path() === '/program-details-edit';
}]);

configApp.controller('OrganizationController', ['$scope', '$location', '$route', function($scope, $route, $location) {
    $scope.hideNavIcons = $location.path() === '/organizations';
    $scope.$route = $route;
}]);

Answer 1

您需要将控制器添加到元素中。＆＃34;纳克控制器=＆＃39; controllerName＆＃39;＆＃34;作为一个属性。至于类型错误，它是未定义的，但如果你做... !!变量，那么undefined会变为false。

编辑：

   <div class="row" ng-controller="ProgramDetailsEdit">
       <!-- Header to be shown when a program is edited-->
       <div ng-include="'templates/headers/nav-icons.html'" ng-if="!!showNavIcons">
   </div>

ng-controller将把潜水中的dom提供给它放入你在其中设置的$ scope变量的所有内容。

作为旁注，您应该查看UI-Router https://github.com/angular-ui/ui-router

它比$ routeProvider更容易，更强大，你可以改为按照以下方式做点什么......

<div class="row" ng-controller="appController">
       <!-- Header to be shown when a program is edited-->
       <div ng-include="'templates/headers/nav-icons.html'" ng-if="state.name == 'programEditor'">
</div>

Answer 2

它可能是你html chrome上缺少的ng-controller标签。如下所示：

Answer 3

使用angularJS ui路由器代替ngRouter可以轻松解决问题。感谢所有指导我的完美解决方案。

以下是我如何解决它：

的Javascript

var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap','ui.router'])

 .config(function($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/dashboard");

    // ui router states
    $stateProvider
        .state('cas', {
            url: "/cas",
            views: {
                header: {
                    templateUrl: 'templates/headers/nav-logo.html',
                    controller: function($scope) {}
                },
                content: {
                    templateUrl: 'templates/dashboard/organizations/organizations-title.html',
                    controller: function($scope) {}
                }

            }
        })
        .state('applications', {
            url: "/applications",
            views: {
                header: {
                    templateUrl: 'templates/headers/nav-logo.html',
                    controller: function($scope) {}
                },
                content: {
                    templateUrl: 'templates/dashboard/application/applications-title.html',
                    controller: function($scope) {}
                }
            }
        })

        .state('organizations', {
            url: "/organizations",
            views: {
                header: {
                    templateUrl: 'templates/headers/nav-logo.html',
                    controller: function($scope) {}
                },
                content: {
                    templateUrl: 'templates/dashboard/organizations/organizations-title.html',
                    controller: function($scope) {}
                }
            }
        })

        .state('program-details', {
            url: "/program-details",
            views: {
                header: {
                    templateUrl: 'templates/headers/nav-icons.html',
                    controller: function($scope) {}
                },
                content: {
                    templateUrl: 'templates/dashboard/organizations/programs/program-details.html',
                    controller: function($scope) {}
                }
            }
        })

        .state('program-details-edit', {
            url: "/program-details-edit",
            views: {
                header: {
                    templateUrl: 'templates/headers/nav-icons.html',
                    controller: function($scope) {}
                },
                content: {
                    templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
                    controller: function($scope) {}
                }
            }
        });

});

HTML

<html lang="en" ng-app="configApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>Configuration Admin</title>

    <!-- Bootstrap CSS -->
    <link href="_/css/bootstrap.css" rel="stylesheet">
    <link href="_/css/main-styles.css" rel="stylesheet">


</head>
<body>
<div class="container">
    <!-- Header-->
       <div class="row" ng-controller="NavCtrl">
           <div ui-view="header"></div>
       </div> <!-- end header -->

    <section class="main-content">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-xs-3 sidebar">
                <!-- Pullout menu -->
                <nav id="sidebar-pullout">
                        <!--<li><a href="#/application-settings">application</a></li>-->
                        <!--<li><a href="#/organization-settings">organization</a></li>-->
                        <div id="menu-listings"></div>
                </nav>
                <!-- end pullout-->
                <div ng-controller="SideNavCtrl">
                    <ul class="list-unstyled side-nav">
                        <li ng-class="{active:isActive('/cas')}"><a id="showCas" href="#/cas" ui-sref="cas">cas</a></li>
                        <li ng-class="{active:isActive('/applications')}"><a href="#/applications" ui-sref="applications">application</a></li>
                        <li ng-class="{active:isActive('/organizations')}"><a  href="#/organizations" ui-sref="organizations">organization</a></li>
                    </ul>
                </div>
            </div> <!-- Side Bar end -->
            <!-- Page Content -->
            <div class="col-xs-9 main-page">
                <div ui-view="content"></div>
            </div>  <!-- Page content end -->
        </div>
    </section> <!-- End main Content -->

</div>


<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/angular-ui-router.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>

</body>
</html>

AngularJS ng-if根据路径位置显示标题内容

3 个答案: