角度ui视图不会滚动到底部

时间:2016-06-21 11:27:33

标签: angularjs angular-ui-router

我正在与角度ui路由器挣扎。

它正确地渲染了一个带有ng-repeat表的视图,但是没有使用ng-repeat的详细视图。

模板加载,DOM呈现并且ng-repeat踢...内容显示但我无法向下滚动以查看整个内容

<ui-view></ui-view>

$stateProvider
.state('tickets', {
    url: '/tickets',
    templateUrl: '/assets/html/tickets.html',
    controller: 'ticketController'
})
.state('dashboard', {
    url: '/',
    templateUrl: '/assets/html/dashboard.html',
    controller: 'dashboardController'
})
.state('ticketDetail', {
    url: '/tickets/:id',
    templateUrl: '/assets/html/ticketDetail.html',
    controller: 'ticketDetailController'
});
$urlRouterProvider.otherwise('dashboard');

状态票据加载了所提到的票证列表,状态ticketDetail加载票证的详细视图,如果从后端加载内容,我不能再滚动...

当使用角度ui-router时,非常令人失望,这就出现了!

我会很高兴找到一些解决方案!

我要加载的模板:

<div class="container" style="top: 75px;">
<div class="columns">
<div class="column col-2"></div>
<div class="column col-8">
<ul class="breadcrumb">
    <li class="breadcrumb-item">
        <a ui-sref="tickets">
            Tickets
        </a>
    </li>
    <li class="breadcrumb-item">
        <a href="#">
            {{thisTicket.id}}
        </a>
    </li>
</ul>
<div class="divider"></div>
<div ng-if="isLoading == true" class="loading"></div>
<div ng-if="isLoading == false">
<div class="columns">
    <div class="column"><h6>Titel:</h6>{{thisTicket.title}}</div>
    <div class="column"><h6>Priority:</h6>{{thisTicket.priority}}</div>
    <div class="column"><h6>Status:</h6><span class="label label-primary">{{thisTicket.status}}</span></div>
    <div class="column"><h6>Type:</h6>{{thisTicket.type}}</div>
    <div class="column"><h6>Assignee:</h6>{{thisTicket.assignee}}</div>
    <div class="column"><h6>Owner:</h6>{{thisTicket.owner}}</div>
</div>
<br>
</div>
<div class="divider"></div>
<ul class="tab tab-block">
    <li class="tab-item active">
        <a >
            Conversation
        </a>
    </li>
    <li class="tab-item">
        <a >
            Attachements
        </a>
    </li>
    <li class="tab-item">
        <a >
            Images
        </a>
    </li>
    <li class="tab-item">
        <a >
            Connect
        </a>
    </li>
</ul>
<div scroll-glue>
    <!-- Content here will be "scroll-glued". -->
    <blockquote ng-repeat="comment in thisTicket.comments">
        <p ng-bind-html="comment.text"></p>
        <cite>
            <div class="chip-sm">
                <img src="http://vignette1.wikia.nocookie.net/callofduty/images/c/c5/GHOSTS.jpg/revision/latest?cb=20130501101925" class="avatar" />
                <span class="chip-name">{{comment.owner}} at {{comment.createDate}}</span>
            </div>
        </cite>
    </blockquote>
</div>
    <!-- form textarea control -->
    <div class="form-group">
        <label class="form-label" for="input-example-3">Message</label>
        <text-angular ng-model="comment" style="" ta-toolbar="[['bold','italics','underline','strikeThrough'],['pre','quote'],['ul','ol']]"></text-angular>
        <br>
        <button class="btn btn-block" ng-click="addComment(comment)">Absenden</button>
    </div>
    </div>
<div class="column col-2"></div>
</div>
</div>

0 个答案:

没有答案