Question

我有以下角度应用。

// app.js

var rippleApp = angular.module('rippleApp', ['ngRoute', 'ngAnimate', 'ngAria', 'ngMaterial']);

// configure our routes
rippleApp.config(function ($routeProvider, $compileProvider) {

    $routeProvider

        // route for the home page
        .when('/home', {
            templateUrl: '../pages/home.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: '../pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: '../pages/contact.html',
            controller: 'contactController'
        });
});

// create the controller and inject Angular's $scope

rippleApp.controller('sideNavController', function ($scope, $mdSidenav) {
    $scope.openLeftMenu = function () {
        $mdSidenav('left').toggle();
    };
    $scope.openRightMenu = function () {
        $mdSidenav('right').toggle();
    };
});

rippleApp.controller('mainController', function ($scope, $mdSidenav) {
    // create a message to display in our view
    $scope.pageClass = 'page-home';
    $scope.message = 'Everyone come and see how good I look!';
    $scope.openLeftMenu = function () {
        $mdSidenav('left').toggle();
    };
    $scope.openRightMenu = function () {
        $mdSidenav('right').toggle();
    };
});

rippleApp.controller('notificationsController', function ($scope, $mdToast, $document) {
    $scope.showToast1 = function () {
        $mdToast.show(
           $mdToast.simple()
              .textContent('Hello World!')
              .hideDelay(3000)
        );
    };

    $scope.showToast2 = function () {
        var toast = $mdToast.simple()
           .textContent('Hello World!')
           .action('OK')
           .highlightAction(false);
        $mdToast.show(toast).then(function (response) {
            if (response == 'ok') {
                alert('You clicked \'OK\'.');
            }
        });
    }
});
rippleApp.controller('aboutController', function ($scope) {
    $scope.pageClass = 'page-about';
    $scope.message = 'Look! I am an about page.';
});

rippleApp.controller('contactController', function ($scope) {
    $scope.pageClass = 'page-contact';
    $scope.message = 'Contact us! JK. This is just a demo.';
});

和以下索引文件

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <!--
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        -->
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <!--Scripts-->

        <!--Stylesheets-->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <link rel="stylesheet" href="css/bundle.css" />
        <link rel="stylesheet" href="css/index.css">
        <title>RippleAlpha</title>
    </head>
    <body ng-app="rippleApp" ng-controller="mainController">

        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <div id="sideNavContainer" layout="row" ng-cloak>
                            <md-sidenav md-component-id="left" class="md-sidenav-left">Test case</md-sidenav>
                            <md-content>
                                <md-button class="navbar-brand" ng-click="openLeftMenu()">SM</md-button>
                            </md-content>
                        </div>
                    </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a ng-href="#home"><i class="fa fa-home"></i> Home</a></li>
                        <li><a ng-href="#about"><i class="fa fa-shield"></i> About</a></li>
                        <li><a ng-href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                    </ul>
                </div>
            </nav>

            <div id="toastContainer" ng-controller="notificationsController as ctrl" layout="row" ng-cloak>
                <md-button ng-click="showToast1()">notification</md-button>
                <md-button ng-click="showToast2()">notification - callback</md-button>
            </div>
        </header>
        <div id="main">
            <div class="page {{ pageClass }}" ng-view></div>
        </div>
        <script src="scripts/bundle.js"></script>
        <script src="scripts/app.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>
</html>

我能够在浏览器/ ripple模拟器中获取路由等工作，但在设备上调试时，我无法使用路由，导航无效。

这是角1.5.X

Answer 1

我发现了我的问题。

有关寻求此问题解决方案的任何人的进一步参考。

我的一个问题是我在起诉网页＆＃39; ../页面*＆＃39;

由于这不是一个http网址，而是一个失败：///我只需将其更改为从＆＃39;页面开始/＆＃39;相对网址。

问题现在解决了。

Cordova ng-route无法正常工作

1 个答案: