Angular Breadcrumb n'a pas fonctionné

tout d'abord désolé pour mon mauvais anglais. Donc, je veux ajouter du fil d'Ariane à mon App angulaire. J'essaie d'utiliser this. Tout semble fonctionner mais ce n'est pas le cas. Voici ce que j'ai obtenu maintenant - voir les liens sur le fondAngular Breadcrumb n'a pas fonctionné

ligne grise devrait être mon fil d'Ariane. Je n'ai aucune erreur dans la console.

Voici comment ressembler html - voir liens en bas

Je ne sais pas où est l'erreur ou mon erreur.

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

et la structure de dossiers

App
- images
- scripts
  - app.js
  - contrôleurs
  - modules
    - mie de pain
    - calendrier etc.
- styles
- vues

Source

2015-07-22 MMPL1

Cette question a été très mal formatée. Il n'est pas évident de lire la question quel est votre problème réel sans aucun code présenté, et vos "liens" vers une autre page qui a plus de liens vers d'autres endroits. Au mieux, les lecteurs ne prendront pas le temps d'essayer de suivre le sentier pour voir le problème, et la question sera ignorée. Au pire, il sera fermé comme hors sujet pour ne pas fournir le code dans la question elle-même. – Claies

Je le sais, je ne peux pas ajouter plus de liens parce que je suis un nouveau membre. Que puis-je faire? – MMPL1

N'ajoutez aucun lien. afficher tout le code pertinent dans la question. – Claies

Votre breadcrumb section du index.html n'a pas de contrôleur qui lui est attribué, il ne peut jamais trouver une instance de l'objet breadcrumb . En outre, vous devrez modifier légèrement le HTML pour prendre en charge la syntaxe controllerAs ici.

Essayez ceci:

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

En outre, il semble que vous avez déclaré 'breadCrumbs' comme son propre module, de sorte que vous aurez envie de déplacer l'injection du module ng-breadcrumbs du 'timeSheet2App'-'breadcrumbs', par exemple:

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

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

En guise de remarque, je ne recommande pas d'utiliser controllerAs: 'vm' pour chaque contrôleur de votre application, cela rend plus difficile l'identification du contrôleur, surtout si vous avez des contrôleurs imbriqués.Il est préférable de nommer le controllerAs quelque chose de similaire à votre nom de contrôleur actuel.

Source

2015-07-22 13:12:06 Claies

Bon travail! Merci beaucoup. – MMPL1

Angular Breadcrumb n'a pas fonctionné

Répondre

Questions connexes