Я очень новичок в angularjs и изучении на данный момент. В настоящее время я изучаю провайдера маршрутов angularjs. Я создал пару страниц, которые независимо работали нормально. Я пытаюсь реализовать поставщика маршрутов. На моей странице welcome.html я использую стороннюю панель слайда http://dpiccone.github.io/ng-pageslide/examples/пользовательские директивы, не работающие с angularjs routeprovider
Я использовал ее на одной странице, она отлично работала. Я сейчас пытаюсь осуществить поставщика маршрута, как показано ниже
Мой index.html
<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="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.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">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<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/dashboardrouter.js"></script>
<script src="resources/js/TypeAheadController.js"></script>
<script src="resources/js/angular-pageslide-directive.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-view></div>
</body>
</html>
мое приложение файл
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);
Мой routeprovider
angular.module('ui.bootstrap.demo').config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'welcome.html',
controller: 'CarouselDemoCtrl'
}).
when('/queryBoard/:gridName', {
templateUrl: 'query/queryboard.html',
controller: 'documentNameTypeAheadController',
}).
otherwise({
redirectTo: '/welcome'
});
}]);
мой Welcome.html файл
<html ng-app="ui.bootstrap.demo">
<body>
<style type="text/css">
body {
background: url(/resources/images/nyc.jpg) center top no-repeat;
}
.ng-pageslide {
background: #ac2925;
}
</style>
<div>
<h1 class="text-center text-primary centered">Welcome to ananta-gs dashboard</h1>
<div>
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="/resources/images/cloud-home.jpg" style="height:305px; margin:auto;">
<div class="carousel-caption">
<a ng-click='sendEnvName(slide.text)'>
<h3 class="carousel-caption text-primary center-block">
{{slide.text}}</h3>
</a>
</div>
</uib-slide>
</uib-carousel>
<a href="" style="background-color: #ac2925" ng-show="errorShow" ng-click="toggle()">There are exceptions during app initialization, click here to see details</a>
</div>
<div>
<pageslide ps-open="checked" ps-side="left" ps-squeeze="true">
<div style="padding:20px" id="demo-right">
<h2>Exceptions : </h2>
<p style="word-wrap: break-word">{{exceptions}}</p>
<a ng-click="toggle()" class="button">Close</a>
</div>
</pageslide>
</div>
</div>
</body>
</html>
Все компоненты бутстрапа работают нормально, то есть карусель работает нормально, и я уверен, что мой CarouselDemoCntrl также вызывается, поскольку он извлекает данные.
Но компоненты, такие как <pageslide> не работают, которые определены в angular-pageslide-directive.js
Точно так же у меня есть страница queryboard.html используется ngTableParams, угловой не в состоянии решить, что также.
Ожидается, что при нажатии на кнопку «Есть исключения во время инициализации приложения, нажмите здесь, чтобы просмотреть детали» должна отображаться панель слайдов, которая содержит список исключений, вместо этого я вижу здесь, что вместо панели слайдов она печатается в виде обычного текста на странице html.
Ниже приведен код для CarouselDemoCtrl
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, $uibModal, $location) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.errorShow = false;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function (envName) {
slides.push({
text: envName,
id: currIndex++
});
};
$http.get("http://localhost:8080/getEnvList")
.success(function (data) {
var envs = data.spaceLookUpDetailsList;
for (var i in envs) {
$scope.addSlide(envs[i].envName);
}
if(data.exceptions) {
$scope.errorShow = true;
$scope.exceptions = data.exceptions;
}
})
.error(function (errordata) {
$uibModal.open({
templateUrl: 'error/ErrorModal.html',
controller: 'ErrModalInstanceCtrl',
resolve: {
error: function() {
console.log('error=' + errordata.errorMessage)
return errordata;
}
}
});
});
$scope.toggle = function() {
$scope.checked = !$scope.checked;
}
$scope.sendEnvName = function (gridName) {
alert(gridName)
$location.path("/queryBoard/"+gridName);
}
});
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');
};
});
Может кто-нибудь, пожалуйста, руководство меня здесь
Основываясь на том, что вы опубликовали, все выглядит правильно. Когда вы говорите, что ваша директива 'pagelide' не работает, что именно это означает? Вы не показали нам определения этой директивы и не описали ожидаемое поведение по сравнению с наблюдаемым поведением. – Lex
Не могли бы вы отправить код CarouselDemoCtrl? –
@ Lex вопрос обновлен с ожидаемым поведением наблюдаемого поведения –