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

我有一个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>

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;
}]);

最佳答案

您需要将控制器添加到元素中。 “ ng-controller ='controllerName'”作为属性。至于类型错误，它是未定义的，但是如果您执行... !!变量，则未定义变为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>

关于javascript - AngularJS ng-if根据路线位置显示标题内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24480214/