stackoom
  简体   繁体   中英

Angular Breadcrumb didn't work

 原文  2015-07-22 12:29:09  2   1    javascript/ angularjs/ breadcrumbs

Question

first of all sorry for my bad English.

So, I want to add breadcrumb to my angular App. I'm trying to use this . Everything seems to work but it's not. Here's what I got now - see links on bottom

grey row should be my breadcrumb. I don't have any errors in console.

This is how look like html - see links on the bottom

I don't know where is error or my mistake.

Here's some code.

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>

and folders structure

  • App
    • images
    • scripts
      • app.js
      • controllers
      • modules
        • breadcrumbs
        • calendar etc.
    • styles
    • views

1 answers

solution1
 0 ACCPTED  2015-07-22 13:12:06

Your breadcrumb section in the index.html doesn't have any controller assigned to it, so it can't ever locate an instance of the breadcrumb object. Also, you'll have to modify the HTML slightly to support the controllerAs syntax here.

Try this: 

<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>

Also, it looks like you declared 'breadCrumbs' as it's own module, so you'll want to move the ng-breadcrumbs module injection from the 'timeSheet2App' to 'breadcrumbs' , eg: 

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

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

As a side note, I don't recommend using controllerAs: 'vm' for every controller in your app, it tends to make it harder to identify which controller is which, especially if you have nested controllers. It's much better to name the controllerAs something similar to your actual controller name.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular 4 + JavaScript - Simple slideshow didn't work jQuery .click() didn't work Angular ngOnDestroy didn't fire Delete Button didn't work Javascript replaces didn't work remove disabled didn't work SVG drawing didn't work Radium hover didn't work looping javascript didn't work onmouseover function didn't work
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM