0
私はangularjsでサイドパネルを実装しようとしていますが、私はここのリンクhttps://github.com/dpiccone/ng-pageslideとhttp://dpiccone.github.io/ng-pageslide/examples/を参照しています。anguarjsのサイドパネル
以下は私のHTMLコードとJavaスクリプトですが、私は動くことができません。私はコンソールにエラーが表示されません。 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');
};
});
以下
<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>
いくつかのいずれかは、私は私が間違っているつもり場所を見つけ出す助けてくださいことはできますか？
私はdatashareを使いこなそうとしましたが、ps-open = "true"と明示的にマークしたときにページのサイドパネルを見ることができたので、何らかの理由でトグル機能が呼び出されなかったトグル機能が呼び出されなかった理由を入力しますか？ –
あなたはリンクを見ましたか？あなたのコードとその作業。 JavaScriptのコンソールを開いてエラーを探しましたか？これが動作しなくなっている可能性があります。 – Dylan
ブラウザでjavascriptコンソールを使用している場合は、表示されていないtoggleメソッドでconsole.log行を追加しようとしました。 –