自定义指令不适用于angularjs routeprovider

Question

I am very new to angularjs and learning as of now. 到目前为止，我对angularjs和学习都是非常陌生的。 I am currently learning angularjs route provider. 我目前正在学习angularjs路由提供者。 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/ 在我的welcome.html页面中，我使用的是第三方滑出面板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 我的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 我的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>

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. 所有的引导程序组件都工作正常，即轮播工作正常，并且我确信在获取数据时也调用了我的CarouselDemoCntrl。

But the components like <pageslide> are not working which are defined in the angular-pageslide-directive.js 但是像<pageslide>这样的组件<pageslide>这些组件在angular-pageslide-directive.js中定义

Similarly i have a page queryboard.html is used ngTableParams, angular is not able to resolve that also. 同样，我有一个页面queryboard.html用于ngTableParams，Angular也无法解决。

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. Pageslide的预期行为是，当我单击“应用程序初始化期间有异常，请单击此处以查看详细信息”时，应该出现一个包含例外列表的滑出面板，而不是我在这里看到的是滑出面板，它以纯文本格式显示在html页面中。

Below is the code for CarouselDemoCtrl 以下是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 能帮我在这里吗

Answer 1

Two problems here: 这里有两个问题：

First, you did not inject the module for pageslide ("pageslide-directive") 首先，您没有为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). 其次，您编写的welcome.html就像是一个独立的网页一样，而不是作为模板（这就是您想要的）。 Remove the html and body tags from welcome.html, and you should be all set. 从welcome.html删除html和body标记，您应该已经准备就绪。

自定义指令不适用于angularjs routeprovider

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-18 15:35:57

自定义指令不适用于angularjs routeprovider

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-18 15:35:57

解决方案1
2 已采纳 2016-06-18 15:35:57