Angular 面包屑导航无效

Question

首先抱歉我的英语不好。

所以，我想在我的 angular 应用程序中添加面包屑导航。我正在尝试使用 this。一切似乎都有效，但事实并非如此。这是我现在得到的 - 请参阅底部的链接

灰色行应该是我的面包屑。我在控制台中没有任何错误。

这看起来像 html - 查看底部的链接

不知道是哪里出错了还是我的错误

这是一些代码。

app.js

'use strict';
/**
 * @ngdoc overview
 * @name timeSheet2App
 * @description
 * # timeSheet2App
 *
 * Main module of the application.
 */
angular
.module('timeSheet2App', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngMaterial',
    'ngMdIcons',
    'appMenu',
    'appProfiles',
    'ngMdIcons',
    'loginApp',
    'calendarApp',
    'registryApp',
    'appConfiguration',
    'ui.calendar',
    'tasksApp',
    'ui.router',
    'ng-breadcrumbs',
    'breadCrumbs'
])

.config(config)
.run(run);

config.$inject = ['$routeProvider', '$locationProvider'];

function config($routeProvider, $locationProvider) {
$routeProvider
    .when('/', { templateUrl: '../views/profil.html', label: 'Profil' }
        )
    .when('/calendar', {
        templateUrl: 'scripts/modules/calendar/views/calendar.html',
        controller: 'CalendarCtrl',
        controllerAs: 'vm',
        label: 'Calendar'
    })

    .when('/login', {
        templateUrl: 'scripts/modules/loginForm/views/login.html',
        controller: 'LoginController',
        controllerAs: 'vm',
        label: 'Login'
    })
    .when('/register', {
        templateUrl: 'scripts/modules/registerForm/views/register.html',
        controller: 'RegisterController',
        controllerAs: 'vm',
        label: 'Register'
    })
    .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about',
        label: 'About'
    })
    .when('/main', {
        templateUrl: 'scripts/modules/menu/views/menu.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
    })
    .when('/menu', {
        templateUrl: 'scripts/modules/menu/views/menu.html'
    })
    .when('/profil', {
        templateUrl: 'views/profil.html'
    })
    .when('/404', {
        templateUrl: '404.html',
    })
    .when('/quicktasks', {
        templateUrl: 'scripts/modules/quicktasks/views/quicktasks.html',
        controller: 'QuickTasksCtrl',
        controllerAs: 'vm'
    })
    .when('/breadcrumbs', {
        templateUrl: 'scripts/modules/breadcrumbs/views/breadcrumbs.html',
        controller: 'BreadCrumbsCtrl',
        controllerAs: 'vm',
        label: 'Bread'
    })
    .otherwise({
        redirectTo: '/404'
    });
}

run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];

function run($rootScope, $location, $cookieStore, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
if ($rootScope.globals.currentUser) {
    $http.defaults.headers.common['Authorization'] = 'Basic ' +        $rootScope.globals.currentUser.authdata; // jshint ignore:line
}

$rootScope.$on('$locationChangeStart', function(event, next, current) {
    // redirect to login page if not logged in and trying to access a restricted page
    var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
    var loggedIn = $rootScope.globals.currentUser;
    if (restrictedPage && !loggedIn) {
        $location.path('/login');
    }
});
};

breadcrumbs.js

'use strict';

 /**
 * @ngdoc function
 * @name timeSheet2App.controller:BreadcrumbsCtrl
 * @description
 * # BreadcrumbsCtrl
 * Controller of the timeSheet2App
 */
angular.module('breadCrumbs',[])
.controller('BreadCrumbsCtrl', BreadCrumbsCtrl);
BreadCrumbsCtrl.$inject =['breadcrumbs'];

function BreadCrumbsCtrl (breadcrumbs) {
var vm = this;
vm.breadcrumbs = breadcrumbs;
 };

index.html

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="scripts/modules/menu/styles/appMenu.css">
<link rel="stylesheet" href="scripts/modules/profiles/styles/appProfiles.css">
<link rel="stylesheet" href="scripts/modules/loginForm/styles/loginForm.css">
<link rel="stylesheet" href="scripts/modules/calendar/styles/calendar.css">
<link rel="stylesheet" href="scripts/modules/configuration/styles/appConfiguration.css">
<!-- endbuild -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body ng-app="timeSheet2App">
<!--[if lte IE 8]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<ol class="ab-nav breadcrumb">
<li ng-repeat="breadcrumb in breadcrumbs.get() track by breadcrumb.path" ng-class="{ active: $last }">
  <a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
  <span ng-if="$last" ng-bind="breadcrumb.label"></span>
</li>
</ol>
<div ng-view class="containers"></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
! function(A, n, g, u, l, a, r) {
A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
            (A[l].q = A[l].q || []).push(arguments)
        }, A[l].l = +new Date, a = n.createElement(g),
        r = n.getElementsByTagName(g)[0], a.src = u,         r.parentNode.insertBefore(a, r)
}(window, document, 'script', 'https://www.google-    analytics.com/analytics.js', 'ga');

ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/screenfull/dist/screenfull.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ng-breadcrumbs/dist/ng-breadcrumbs.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src='bower_components/fullcalendar/dist/lang/pl.js'></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/modules/loginForm/controllers/LoginCtrl.js"></script>
<script src="scripts/modules/registerForm/controllers/RegisterCtrl.js"></script>
<script src="scripts/modules/loginForm/services/authentication.service.js"></script>
<script src="scripts/modules/loginForm/services/flash.service.js"></script>
<script src="scripts/modules/loginForm/services/user.service.local-storage.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/modules/menu/controller/menu.js"></script>
<script src="scripts/modules/menu/service/getMenuData.js"></script>
<script src="scripts/modules/menu/directive/menuLink.js"></script>
<script src="scripts/modules/menu/directive/menuToggle.js"></script>
<script src="scripts/modules/menu/directive/menuSidenav.js"></script>
<script src="scripts/modules/profiles/controller/appProfiles.js"></script>
<script src="scripts/modules/profiles/service/getDataProfiles.js"></script>
<script src="scripts/modules/profiles/directive/profilMini.js"></script>
<script src="scripts/modules/profiles/directive/settingProfil.js"></script>
<script src="scripts/modules/profiles/directive/editProfilOption.js"></script>
<script src="scripts/modules/calendar/controllers/CalendarCtrl.js"></script>
<script src="scripts/modules/calendar/controllers/CalendarCtrl.js"></script>
<script src="scripts/modules/configuration/controller/appConfiguration.js"></script>
<script src="scripts/modules/configuration/directive/configurationModule.js"></script>
<script src="scripts/modules/configuration/directive/configurationSetting.js"></script>
<script src="scripts/modules/quicktasks/controllers/quicktasks.js"></script>
<script src="scripts/modules/breadcrumbs/controllers/breadcrumbs.js">  </script>
<!-- endbuild -->

</body>

</html>

和文件夹结构

应用程序
- 图片
- 脚本
  - app.js
  - 控制器
  - 模块
    - 面包屑
    - 日历等
- 样式
- 观看次数

Answer 1

您在 index.html 中的 breadcrumb 部分没有分配任何控制器，因此它永远无法找到 breadcrumb 对象的实例。此外，您必须稍微修改 HTML 以支持此处的 controllerAs 语法。

试试这个：

<div ng-controller="BreadCrumbsCtrl as breadctrl">
  <ol class="ab-nav breadcrumb">
    <li ng-repeat="breadcrumb in breadctrl.breadcrumbs.get() track by breadcrumb.path" ng-class="{ active: $last }">
      <a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
      <span ng-if="$last" ng-bind="breadcrumb.label"></span>
    </li>
  </ol>
</div>

此外，您似乎将 'breadCrumbs' 声明为它自己的模块，因此您需要将 ng-breadcrumbs 模块注入从 'timeSheet2App' 移动到 'breadcrumbs' , 例如:

angular.module('breadCrumbs',['ng-breadcrumbs'])
...

angular
.module('timeSheet2App', [
...
'ui.router',
//'ng-breadcrumbs', <-- no need for this here...
'breadCrumbs'
...

附带说明一下，我不建议对应用中的每个控制器都使用 controllerAs: 'vm'，这往往会使识别哪个控制器变得更加困难，尤其是在您有嵌套控制器的情况下。最好将 controllerAs 命名为类似于您的实际控制器名称。

Angular 面包屑导航无效

Angular Breadcrumb didn't work

javascript

breadcrumbs

angularjs