Question

我正在尝试使用AngularJS实现侧面板，我指的是此处的链接https://github.com/dpiccone/ng-pageslide和http://dpiccone.github.io/ng-pageslide/examples/。

下面是我的HTML代码和javascript，但我无法使其正常运行。我在控制台中看不到任何错误。

    <html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
    <script src="resources/js/main.js"></script>
    <script src="resources/js/CarouselController.js"></script>
    <script src="resources/js/gsenv.js"></script>
    <script src="resources/js/thirdparty/angular-pageslide-directive.js"></script>
</head>
<body>

<style type="text/css">
    body {
        background: url(/resources/images/nyc.jpg) center top no-repeat;
    }

    html {
        overflow-x: hidden;
    }

    .ng-pageslide {
        background: #eee;
    }

    body.ng-pageslide-body-open::before {
        content: '.';
        display: block;
        position: absolute;
        top: 0;
        background-color: rgb(0, 0, 0);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0.5;
        transition: opacity 1s;
        opacity: 0.5;
        pointer-events: all;
    }

    body.ng-pageslide-body-closed::before {
        transition: opacity 1s;
        content: '.';
        display: block;
        position: absolute;
        top: 0;
        background-color: rgb(0, 0, 0);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
    }
</style>
<div ng-controller="CarouselDemoCtrl" class="container-fluid">
    <h1 class="text-center text-primary">Welcome to ananta-gs dashboard</h1>
    <div style="height: 305px; width: 450px; margin:auto">
        <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
            <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                <img ng-src="/resources/images/cloud-home.jpg" style="margin:auto;">
                <div class="carousel-caption">
                    <a href="#" ng-click='sendEnvName(slide.text)'>
                        <h3 class="carousel-caption text-primary center-block">
                            {{slide.text}}</h3>
                    </a>
                </div>
            </uib-slide>
        </uib-carousel>
    </div>
    <h3>Squeeze content</h3>
<a class="tiny button" href="" ng-click="toggle()">Open Sidebar</a>
<pageslide ps-open="checked" ps-side="left" ps-squeeze="true">
    <div style="padding:20px" id="demo-right">
        <h2>Hello Pageslide</h2>
        <p>Put here whatever you want</p>
        <a ng-click="toggle()" class="button">Close</a>
    </div>
</pageslide>
</div>
</body>
</html>

在jsfile下面

main.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngTable', 'pageslide-directive']);

CarouselController.js

/**
 * Created by Aj on 14-06-2016.
 */
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare, $uibModal) {
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;
    var slides = $scope.slides = [];
    var currIndex = 0;

    $scope.sendEnvName = function (data) {
        dataShare.sendEnvDetails(data);

        window.location.href = "query/queryboard.html";
    }

    $scope.addSlide = function (envName) {
        slides.push({
            text: envName,
            id: currIndex++
        });
    };

    $http.get("http://localhost:8080/getEnvList")
        .success(function (data) {
            for (var i in data) {
                $scope.addSlide(data[i].envName);
            }
        })
        .error(function (errordata) {
            $uibModal.open({
                templateUrl: 'error/ErrorModal.html',
                controller: 'ErrModalInstanceCtrl',
                resolve: {
                    error: function () {
                        console.log('error=' + errordata.errorMessage)
                        return errordata;
                    }
                }
            });


        });

    $scope.checked = false;
    $scope.size = '100px';

    $scope.toggle = function () {
        $scope.checked = !$scope.checked
    }

});

angular.module('ui.bootstrap.demo').controller('ErrModalInstanceCtrl', function ($scope, $uibModalInstance, error) {
    $scope.errormessage = error.errorMessage;
    $scope.stacktrace = error.stackTrace;

    $scope.ok = function () {
        $uibModalInstance.close('closed');
    };
});

有人可以帮我弄清楚我哪里出错吗？

Answer 1

似乎在这里工作。我建议打开你的开发工具。我感觉你在控制台中遇到了一些Javascript错误。

http://plnkr.co/edit/Svl4wkATqqMmhIJJvdoy

这是你的控制器的一部分，我拿出'dataShare'，你可能会丢失有该服务的页面上的文件，把它取出来它应该可以工作。

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, $uibModal)

我没有你所有的文件，所以我尽我所能。

Sidepanel与AngularJS

1 个答案: