小编Aus*_*rez的帖子

我想要有两个不同的模板.一个是登出用户的登录页面,用于描述用户登录的业务和其他仪表板页面.

我在其他堆栈上阅读了如何使用UI路由器执行此操作.我想知道使用ngRoute做类似这样的事情的最佳做法？

下面设置的方式是"/ frontdesk"是仪表板,"/"是已注销用户的登录页面.但!我希望用户是在仪表板上还是注销并发送到登录页面的URL相同!我不想要"/ frontdesk",我希望"/"用于IndexController和FrontdeskController.

这是我的路由JS.

(function () {
      'use strict';

    angular
      .module('resonanceinn.routes')
      .config(config);

    config.$inject = ['$routeProvider'];

    function config($routeProvider) {
      $routeProvider
        .when('/', { // This is the landing Page
            controller: 'IndexController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/layout/index.html'
        })
        .when('/frontdesk', { //This is logged in user that I want to become '/' as well
            controller: 'FrontdeskController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/frontdesk/frontdesk.html'
        })
        .when('/register', {
            controller: 'RegisterController', 
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/authentication/register.html'
        })
        .when('/login', {
            controller: 'LoginController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/authentication/login.html '
        }) …

对于我的计划页面,我使用的面板包含每个计划提供的内容.

我遇到的问题是因为每个面板的大小不同,当您在移动设备上查看时,它看起来像这样:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 1 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 2 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 3 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 4 --> </div>
    </div>
</div>

我希望它看起来像这样:

<!-- This is how I attempted to do it -->
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 1 …

我怎样才能摆脱右边的额外空间？

我试过浮动,使用内联inline-block,并使用margin-left而不是偏移量.left.

我排除故障,发现它的这个HTML (.content-list { left: calc(50% + 85px); }; )导致了问题.但我不知道如何解决它.

HTML

        <div class="profile-navbar">
        <div class="content-container">
            <div class="content-nav">
                <ul class="content-list2">
                    <li class="profile-cog">
                        <div class="btn-group btn-container" dropdown is-open="status.isopen">
                            <button type="button" class="btn btn-plain dropdown-toggle profile-btn" dropdown-toggle ng-disabled="disabled">
                                <span class="glyphicon glyphicon-cog" style="font-size: 15px; padding-right: 5px;"></span>
                                <span class="caret"></span>
                            </button>
                            <ol class="dropdown-menu dropdown-menu-right" role="menu">
                                <li><a href="#">Edit Account</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Something Else</a></li>
                            </ol>
                        </div>
                    </li>
                </ul>
                <ul class="content-list">
                    <li class="profile-name">
                        <div>
                            <h4 class="title">
                                <a class="profile-card-name a-correct-underline a-black">Austin Perez</a> …

我不确定会发生什么.我有两个页脚.一个页脚是侧边栏,我的另一个页脚是页面底部的常规页脚.我的底部页脚中的锚标记链接到我的页面,将我带到页面底部而不是从顶部开始,我的侧边栏页脚中的锚标记将我带到页面中间!其他锚链接也会在加载时将我带到页面的中间或随机部分.

我没有使用任何特殊的锚.我不认为......

这是我的双脚的锚点:

<a href="/about" class="a-color">
    <small>About</small>
</a>

我的页面加载了ng-view.我不使用$anchorScroll

我试图将Ng-repeat传递给我,$mdDialog但我没有找到关于如何这样做的文档.我一直在指这个堆栈,但我没有运气将图像传递给模态.

在控制台中我收到一个错误说:

TypeError: Cannot read property 'element' of undefined

控制台错误的原因是什么,而不是将图像传递给模态？

HTML

<md-grid-tile 
    ng-repeat="image in imageBucket.images"
    md-rowspan="{{image.row}}"
    md-rowspan-gt-lg="{{image.rowgtlg}}"
    md-colspan="{{image.col}}"
    md-colspan-gt-lg="{{image.colgtlg}}"
    class="white" >
    <md-button 
        class="" 
        ng-click="showAdvanced($event, image)" 
        flex="100" 
        flex-gt-md="auto">
        <img 
            aria-label="kpinsonstairs" 
            class="img-responsive md-whiteframe-6dp" 
            src="{{image.src}}" 
            alt="Gallery Picture">
            <md-grid-tile-footer>
                <h3>{{image.title}}</h3>
            </md-grid-tile-footer>
    </md-button>
</md-grid-tile>

使用Javascript

(function () {

  'use strict';

    angular
        .module('resonance.gallery.controllers')
        .controller('GalleryOneController', GalleryOneController);

    GalleryOneController.$inject = [
        '$scope',
        '$mdDialog',
        'ImageService'
    ];

    function GalleryOneController($scope, $mdDialog, ImageService) {

      ImageService.success(function(data) {
        $scope.imageBucket = data;
      });


      $scope.showAdvanced = function(ev, image) {

        $mdDialog.show({
          clickOutsideToClose:true,
          controller: function($mdDialog) …