如何使用AngularJS应用Breadcrum

Question

我想在我的应用程序中添加面包屑，我如何使用AngularJS实现这项任务。到目前为止，我已经实现了路由器和头文件，之后不确定如何在AngularJS中使用面包屑。到目前为止尝试了以下代码。。。

索引

<div class="container mainIndexContainer">
        <div id="wrap">
            <div ng-include src="'views/header.html'"></div>
            <div class="container mainIndexContainer">
                <div ui-view=""></div>
            </div>
            <div ng-include src="'views/footer.html'"></div>
        </div>

HTML

    <div class="row">
        <div class="container-fluid banner">
            <div class="red title pull-left">Risk Assessment Platform</div>
            <div class="blue pull-right"></div>
        </div>
    </div>
    <div class="row">
        <nav ng-show="user.isAuthenticated" class="navbar navbar-default risknavheader" role="navigation">
            <ul kendo-menu 
                k-orientation="horizontal" k-rebind="'horizontal'">
                <li><a ui-sref="home" ng-click="showConfirmationOnChange('/')">Dashboard</a></li>
                <li><a  href="">Process Risk & Control
                        Inventory</a>
                    <ul class="submenu">
                        <li ng-show="PROCESS_ADD"><a ui-sref="createProcess" ng-click="showConfirmationOnChange('/process/create')">Create
                                New Process</a></li>
                        <li ng-show="RISK_ADD"><a ui-sref="createRisk" ng-click="showConfirmationOnChange('/risk/create')">Create New Unaligned
                                Risk</a></li>
                        <li ng-show="CONTROL_ADD"><a ui-sref="createControl" ng-click="showConfirmationOnChange('/createNewControl/_new')">Create
                                New Unaligned Control</a></li>
                        <li ng-show="PROCESS_VIEW || RISK_VIEW || CONTROL_VIEW"><a ui-sref="search" ng-click="showConfirmationOnChange('/viewSearchInv')">View/
                                Search Inventory</a></li>
                        <li disabled>View End-to-End</li>
                        <li disabled>Reports</li >
                    </ul></li>
                <li><a class="no-style" href="#">Data Upload </a>
                    <ul class="submenu">
                    <!--  This below link will be useful for future development  -->
                    <!-- li <a  href="#/uploadProcessInventory">Upload Inventory</a></li -->
                        <li disabled>Upload Inventory</li>
                    </ul></li>
                <li><a ui-sref="home">Risk Assessment</a>
                    <ul class="submenu">
                        <li disabled>RCSA</li>
                        <li disabled>CRA</li>
                        <li disabled>Reports</li>
                    </ul></li>
                <li><a  ui-sref="home">Administration </a>
                </li>
                <li style="margin-right: 0px;" class="nav navbar-nav navbar-right" ng-show="user.isAuthenticated"><a>{{user.customUserDetails.workFullName}}</a>
                        <ul  class="submenu">
                            <li><a ui-sref="logout">Logout</a></li>
                        </ul>
                </li>
            </ul>
            </nav>
    </div>
</div>

ROUTER.JS

angular.module('riskAssessmentApp')
       .config(function($stateProvider, $httpProvider, $urlRouterProvider) {
        /*
         * This has to be here because the browsers will not catch the home
         * state without it
         */
        $urlRouterProvider.otherwise( function($injector, $location) {
            var $state = $injector.get("$state");
            $state.go("home");
        });
        $httpProvider.defaults.withCredentials = true;
        $httpProvider.defaults.headers.post = {'Content-Type': 'application/json'}; 
        $httpProvider.interceptors.push('HttpResponseInterceptor');
        $stateProvider
         .state('home', {
                url : '/', 
                templateUrl: 'views/riskAssesmentHomePage.html',
                controller:  'riskHomePageController',
                data: {
                    authenticate: true
                }
             }).state('smlogin', {
                url: '/smlogin',
                controller: 'SMLoginController'
            })
             .state('login', {
               url : '/login',
               templateUrl : 'views/login.html',
               controller : 'LoginController'
             })
             .state('error', {
                 url:'/error', 
                 templateUrl: 'views/error.html'
             })
             .state('settings', {
                 url:'/settings', 
                 templateUrl: 'views/settings.html',
                 controller: 'SettingsController'
             })
             .state('sessions', {
                 url:'/sessions',
                 templateUrl: 'views/sessions.html',
                 controller: 'SessionsController',
                 resolve:{
                     resolvedSessions:['Sessions', function (Sessions) {
                         return Sessions.get();
                     }]
                 }
             })
             .state('metrics', {
                 url:'/metrics', 
                 templateUrl: 'views/metrics.html',
                 controller: 'MetricsController'
             })
             .state('logs', {
                 url:'/logs', 
                 templateUrl: 'views/logs.html',
                 controller: 'LogsController',
                 resolve:{
                     resolvedLogs:['LogsService', function (LogsService) {
                         return LogsService.findAll();
                     }]
                 }
             })
             .state('createProcess', {
                 url:'/process/create', 
                 templateUrl : 'views/createEditProcessContent.html',
                 controller : 'ProcessController',
                data: {
                    authenticate: true
                }
             })
             .state('editProcess', {
                 url:'/process/:process_Id/:refresh', 
                 templateUrl : 'views/createEditProcessContent.html',
                 controller : 'ProcessController',
                data: {
                    authenticate: true
                }
             })
             .state('createRisk', {
                 url:'/risk/create', 
                 templateUrl: 'views/createNewRisk.html',        
                 controller: 'RiskController',
                data: {
                    authenticate: true
                }         
             })

Answer 1

您可以使用https://github.com/ncuillery/angular-breadcrumb

为每个状态定义一个ncyBreadcrumb.label属性

然后使用指令

<div ncy-breadcrumb></div>