Sidepanel with anguarjs

我想用angularjs實現sidepanel，我指的是這裏的鏈接https://github.com/dpiccone/ng-pageslide和http://dpiccone.github.io/ng-pageslide/examples/。Sidepanel with anguarjs

下面是我的HTML代碼和Java腳本，但我無法得到工作。我沒有看到控制檯中的任何錯誤。

<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'); 
    }; 
});

能有人請幫我找出我要去的地方錯了嗎？

來源

2016-06-17 Ambuj Jauhari

它似乎在這裏工作。我會建議打開你的開發工具。我有一種感覺，你在控制檯中得到一些Javascript錯誤。

http://plnkr.co/edit/Svl4wkATqqMmhIJJvdoy

這是你的控制器，我拿出「數據共享」的一部分，你可能缺少的是有服務頁面上的文件，把它拿出來，它應該工作。

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

我沒有你所有的文件，所以我盡我所能。

來源

2016-06-17 21:05:55 Dylan

我試着拿出datashare但它不起作用，但是當我明確地標記ps-open =「true」時，我可以看到頁面上的側面板，所以我的懷疑是由於某種原因沒有調用切換函數，任何輸入爲什麼切換功能可能未被調用？ –

你看過鏈接嗎？它的代碼和它的工作。你打開了JavaScript控制檯並尋找錯誤？彈出的錯誤可能會阻止它正常工作。 – Dylan

如果你的意思是在瀏覽器中的JavaScript控制檯，我確實看了一下，它的全部空白，我試圖在切換方法中添加一個console.log行，它沒有顯示。 –

Sidepanel with anguarjs

回答

相關問題