使用 AngularJS 在 Sharepoint 应用程序上构建快速启动菜单 - 如何缩进某些选项并禁止单击菜单 headers

Question

我正在学习 Andrew Connell 的关于将 SPA 构建为 Sharepoint 应用程序的 PluralSight 课程，他在其中解释了如何将路由配置选项绑定到控制器以实现快速启动。

我完全理解这一点，但我还需要另外两件事，但我不确定该怎么做： 1.菜单的一些选项，只是headers，应该加粗并且没有link。 2. header下面的选项应该在header.

的右边缩进一点

这是我的config.route.js

(function () {
  'use strict';

  var app = angular.module('app');

  // get all the routes
  app.constant('routes', getRoutes());

  // config routes & their resolvers
  app.config(['$routeProvider', 'routes', routeConfigurator]);

  function routeConfigurator($routeProvider, routes) {
    routes.forEach(function (route) {
      $routeProvider.when(route.url, route.config);
    });

    $routeProvider.otherwise({ redirectTo: '/' });
  }

  // build the routes
  function getRoutes() {
    return [
      {
        url: '/',
        config: {
          templateUrl: 'app/dashboard/dashboard.html',
          title: 'Pagina Inicial',
          settings: {
            nav: 0,
            content: 'dashboard',
            quickLaunchEnabled: false
          }
        }
      },
      {
        url: '/LearningPaths',
        config: {
          templateUrl: 'app/learningPath/learningPaths.html',
          title: 'Comites',
          settings: {
            nav: 1,
            content: 'Comites',
            quickLaunchEnabled: true
          }
        }
      },
      {
        url: '/LearningPaths/:id',
        config: {
          templateUrl: 'app/learningPath/learningPathsDetail.html',
          title: 'Calendario Comites',
          settings: {
            nav: 1.1,
            content: 'Calendario Comites',
            quickLaunchEnabled: true
          }
        }
      },
       {
           url: '/LearningPaths/:id',
           config: {
               templateUrl: 'app/learningPath/learningPathsDetail.html',
               title: 'Docs Comites',
               settings: {
                   nav: 1.2,
                   content: 'Docs Comites',
                   quickLaunchEnabled: true
               }
           }
       },
       {
        url: '/LearningItems',
        config: {
          templateUrl: 'app/learningItem/learningItems.html',
          title: 'Dir Estrategica',
          settings: {
            nav: 2,
            content: 'Dir Estrategica',
            quickLaunchEnabled: true
          }
        }
       },
       {
           url: '/LearningItems',
           config: {
               templateUrl: 'app/learningItem/learningItems.html',
               title: 'Vista General',
               settings: {
                   nav: 2.1,
                   content: 'Vista General',
                   quickLaunchEnabled: true
               }
           }
        },
        {
            url: '/LearningItems',
            config: {
                templateUrl: 'app/learningItem/learningItems.html',
                title: 'Mis Vistas',
                settings: {
                    nav: 2.2,
                    content: 'Mis Vistas',
                    quickLaunchEnabled: true
                }
            }
        },
        {
             url: '/LearningItems',
             config: {
                 templateUrl: 'app/learningItem/learningItems.html',
                 title: 'Docs Estrategia',
                 settings: {
                     nav: 2.3,
                     content: 'Docs Estrategia',
                     quickLaunchEnabled: true
                 }
             }
         }
    ];
  }
})();

我的快速启动模板

<div data-ng-controller="quicklaunch as vm"
     id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
  <div class="ms-core-navigation" role="navigation">
    <a id="startNavigation" name="startNavigation"></a>
    <div class="ms-core-sideNavBox-removeLeftMargin">
      <div class="noindex ms-core-listMenu-verticalBox">
        <ul class="noindex ms-core-listMenu-root static">
          <li class="static" data-ng-repeat="route in vm.navRoutes" data-ng-class="{selected: vm.isCurrent(route)}">
            <a href="#{{route.url}}"
               data-ng-bind-html="route.config.settings.content"
               class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"
               data-ng-class="{selected:vm.isCurrent(route), 'ms-core-listMenu-selected':vm.isCurrent(route)}"></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

和快速启动控制器

(function () {
  'use strict';

  // define controller
  var controllerId = 'quicklaunch';
  angular.module('app').controller(controllerId,
    ['$route', 'config', 'common', 'routes', quickLaunch]);

  // init controller
  function quickLaunch($route, config, common, routes) {
    var vm = this;
    // utility method to see if the provided route is the current route
    vm.isCurrent = isCurrent;

    // init controller
    init();

    // init controller
    function init() {
      common.logger.log("controller loaded", null, controllerId);
      getNavigationRoutes();
    }

    // #region private members
    // load all navigatino routes
    function getNavigationRoutes() {
      // only retrieve routes flagged quickLaunchEnabled = true & sort them
      vm.navRoutes = routes.filter(function(route) {
        return route.config.settings && route.config.settings.nav && route.config.settings.quickLaunchEnabled;
      }).sort(function(routeA, routeB) {
        return routeA.config.settings.nav > routeB.config.settings.nav;
      });
    }

    // utility method to see if the provided route is the current route
    function isCurrent(route) {
      if (!route.config.title || !$route.current || !$route.current.title) {
        return '';
      }
      var menuName = route.config.title;
      return $route.current.title.substr(0, menuName.length) === menuName ? 'current' : '';
    }
    // #endroute
  }
})();

Answer 1

看来 CSS 应该能够满足大部分需求。

1) 仅限 header 条目：我假设 "nav: 0" 或 "quickLaunchEnabled: false" 是顶级项目的标志，您可以使用它来分配 class 之类的 'toplevel' 到它 w/ Javascript 然后将 CSS 定义为：

.toplevel {
pointer-events: none;
cursor: default;
font-weight: bold;
}

2) 选项缩进。同样，您应该能够使用 CSS 执行此操作。取

.ms-core-listMenu-verticalBox (or whatever your class is to start the indent with)
{
padding-left: 34px;
border-left-style: none;
}

使用 AngularJS 在 Sharepoint 应用程序上构建快速启动菜单 - 如何缩进某些选项并禁止单击菜单 headers

Using AngularJS to buld quicklaunch menu on Sharepoint App - How to indent some options and disable clicking on menu headers

javascript

css

sharepoint

angularjs