Javascript 自定义指令不适用于angularjs routeprovider_Javascript_Html_Angularjs_Twitter Bootstrap

Javascript 自定义指令不适用于angularjs routeprovider

javascript html angularjs twitter-bootstrap

Javascript 自定义指令不适用于angularjs routeprovider,javascript,html,angularjs,twitter-bootstrap,Javascript,Html,Angularjs,Twitter Bootstrap,我对angularjs很陌生，现在正在学习。我目前正在学习angularjs路线提供商。我已经建立了两个独立的工作良好的页面。我现在正在尝试实现路由提供程序。在我的welcome.html页面中，我使用了第三方滑出面板我只用了一页，效果很好。我现在正试图实现如下路由提供程序 My index.html <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/a

我对angularjs很陌生，现在正在学习。我目前正在学习angularjs路线提供商。我已经建立了两个独立的工作良好的页面。我现在正在尝试实现路由提供程序。在我的welcome.html页面中，我使用了第三方滑出面板

我只用了一页，效果很好。我现在正试图实现如下路由提供程序

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>

我的路线提供者

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文件

<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>

有人能在这里指导我吗

这里有两个问题：

首先，您没有为pageslide注入模块（“pageslide指令”）

你想要这个：

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

其次，您编写welcome.html时将其作为一个独特的网页，而不是模板（这正是您想要的）。从welcome.html中删除html和body标记，您应该已经准备好了。

这里有两个问题：

首先，您没有为pageslide注入模块（“pageslide指令”）

你想要这个：

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

其次，您编写welcome.html时将其作为一个独特的网页，而不是模板（这正是您想要的）。从welcome.html中删除html和body标记，您应该已经准备好了。

根据您发布的内容，一切看起来都是正确的。当您说您的

pageslide

指令不起作用时，这到底是什么意思？您没有向我们展示该指令的定义，也没有描述预期行为与观察到的行为。您可以发布CarouselDemoCtrl代码吗？@Lex question更新了预期行为与观察到的行为behavior@EmilIakoupov根据您发布的内容使用控制器代码进行更新所有内容看起来都是正确的。当您说您的

pageslide

指令不起作用时，这到底是什么意思？您没有向我们展示该指令的定义，也没有描述预期行为与观察到的行为。您可以发布CarouselDemoCtrl代码吗？@Lex question更新了预期行为与观察到的行为behavior@EmilIakoupov使用控制器更新code@AmbujJauhari，我更新了我的答案，包括进一步的解释。这应该对你有帮助。它修复了它，我错过了向模块添加页面幻灯片指令，我继续了，但又卡住了，你能不能也看看这些问题@Ambuj Jauhari，我更新了我的答案，包括进一步的解释。这应该对你们有帮助。它修复了它，我错过了向模块添加页面幻灯片指令，我继续了，但又卡住了，你们能不能也看看这些问题

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