javascript - Angular 面包屑不起作用-6ren

javascript - Angular 面包屑不起作用

转载作者：行者123 更新时间：2023-11-28 07:07:47

首先，我很抱歉我的英语不好。

所以，我想将面包屑添加到我的 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');
    }
});
};

面包屑.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
  - Controller
  - 模块
    - 面包屑
    - 日历等
- 样式
- 观看次数

最佳答案

index.html 中的 breadcrumb 部分没有分配任何 Controller ，因此它无法找到 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 模块注入(inject)'timeSheet2App' 到 'breadcrumbs'，例如:

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

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

顺便说一句，我不建议对应用中的每个 Controller 使用 controllerAs: 'vm' ，这往往会导致更难识别哪个 Controller ，特别是如果您有嵌套 Controller 。最好将 controllerAs 命名为与实际 Controller 名称类似的名称。

关于javascript - Angular 面包屑不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31563196/

文章推荐： javascript - SAPUI5 使用来自 XMII 的 OData 填充 SmartTable

文章推荐： swift - 在共享表中共享屏幕截图

文章推荐： javascript - 可在放置时放置，元素会附加两次

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Angular 面包屑不起作用