如何在AngularJS中导航到Bootstrap Carousel的新页面和特定部分

时间:2018-01-03 18:24:08

标签: angularjs asp.net-mvc twitter-bootstrap angular-ui-router

我有一个使用AngularJS控制器(Ctrl2)的页面。该页面上有一个按钮,用于将用户导航到具有完全独立控制器(Ctrl1)的另一页面,然后滑动旋转木马1。

如何做到这一点?

Ctrl2的Cshtml视图:

<div ng-controller="Ctrl2" class="ng-cloak">
    <div class="row">
        <div class="col-sm-12">
            <h1>Controller 2</h1>
        </div>
    </div>
    <div>
        <button type="button" class="btn btn-primary" ng-click="goToController1Slide1()">Go to Controller 1, Slide 1</button>
    </div>
</div>

Ctrl 2:

'use strict';
app.controller('Ctrl2', ['$scope', '$filter', '$http', '$window', '$location', function ($scope, $filter, $http, $window, $location) {

    $scope.goToController1Slide1 = function(){
        //what goes in here to get us to Controller 1 Slide 1
    };
}]);

Ctrl1的Cshtml视图:

<div ng-controller="Ctrl1" class="ng-cloak">
    <div class="row">
        <div class="col-sm-12">
            <div id="the-carousel" class="carousel slide" data-interval="false">
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-12">
                                <h1><i class="intelicons-user-plus"></i>Slide 0</h1>
                                <p>We DO NOT want to end up on this slide from Controller 2</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-12">
                                <h1><i class="intelicons-user-plus"></i>Slide 1</h1>
                                <p>We want to navigate to this slide from Controller 2</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CTRL1:

'use strict';
app.controller('Ctrl2', ['$scope', '$filter', '$http', '$window', function ($scope, $filter, $http, $window) {

    $scope.sendUserToSlide1 = function(){
        //what goes here to accept the navigation from Controller 2 and send the user to Slide 1 of the carousel?
    };   
}]);

0 个答案:

没有答案