gpt4 book ai didi

javascript - 自定义指令不适用于 AngularJS RouteProvider

转载 作者:行者123 更新时间:2023-12-02 14:30:10 26 4
gpt4 key购买 nike

到目前为止,我对 AngularJS 和学习都很陌生。我目前正在学习 angularjs 路由提供程序。我已经构建了几个独立运行良好的页面。我现在正在尝试实现路线提供者。在我的welcome.html页面中,我使用第三方滑出面板http://dpiccone.github.io/ng-pageslide/examples/

我在一个页面中使用它,效果很好。我现在正在尝试实现如下的路由提供程序

我的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']);

我的路线提供商

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>

所有 Bootstrap 组件都工作正常,即轮播工作正常,并且我确信我的 CarouselDemoCntrl 也被调用,因为它正在获取数据。

但是像 <pageslide> 这样的组件angular-pageslide-directive.js 中定义的功能不起作用

类似地,我有一个页面queryboard.html使用了ngTableParams,Angular也无法解决这个问题。

pageslide 的预期行为是,当我单击“应用程序初始化期间存在异常,单击此处查看详细信息”时,应出现一个滑出面板,其中包含异常列表,而我在这里看到的是滑出面板的内容,以纯文本形式打印在 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');
};
});

有人可以在这里指导我吗

最佳答案

这里有两个问题:

首先,您没有注入(inject)pageslide模块(“pageslide-directive”)

你想要这个:

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

其次,您将welcome.html 编写为一个独特的网页,而不是作为模板(这正是您想要的)。从welcome.html 中删除html 和body 标记,您应该已准备就绪。

关于javascript - 自定义指令不适用于 AngularJS RouteProvider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37898091/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com