首先对我的英语不好对不起。
因此，我想将面包屑添加到我的角度应用程序中。我正在尝试使用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
控制器
模组
面包屑
日历等
样式
意见
最佳答案
您在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命名为与您实际的控制器名称相似的名称。