custom directives not working with angularjs routeprovider
Question
I am very new to angularjs and learning as of now. I am currently learning angularjs route provider. I had built a couple of pages which independently worked fine. I am trying to now implement route provider. In my welcome.html page i am using an third party slide out panel http://dpiccone.github.io/ng-pageslide/examples/
I used it in a single page it worked fine. I am now trying to implement route provider as below
My 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>
my app file
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);
My 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'
});
}]);
my welcome.html file
<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>
All the bootstrap components are working fine, ie carousel is working fine and i am sure that my CarouselDemoCntrl is also invoked, as its fetching the data.
But the components like <pageslide> are not working which are defined in the angular-pageslide-directive.js
Similarly i have a page queryboard.html is used ngTableParams, angular is not able to resolve that also.
Expected behavior for pageslide is that, when i click on "There are exceptions during app initialization, click here to see details" a slide out panel should appear which contains the list of exceptions, instead what i am seeing here is that instead of slideout panel, it is printed in plain text in html page.
Below is the code for 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');
};
});
Can some please guide me here
1 answers
solution1
2 ACCPTED 2016-06-18 15:35:57
Two problems here:
First, you did not inject the module for pageslide ("pageslide-directive")
You want this:
angular.module('ui.bootstrap.demo', ['pageslide-directive', 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);
Second, you wrote welcome.html as if it were a distinct web page, instead of as a template (which is what you want). Remove the html and body tags from welcome.html, and you should be all set.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.