Question

我正在尝试使用angular.js和phonegap开发应用程序。我的问题是我在路由器中设置了一切，但仍然没有加载新视图，所以为了在路由更改后更改视图，您需要刷新。

这是我的index.html文件

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>

        <!-- Use the .min version of bootstrap files in production -->

        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <title>Angular PhoneGap Sample</title>
    </head>

    <body>
        <!-- The following tag is in place of ng-view to use the angular mobile view navigation framework
            https://github.com/ajoslin/angular-mobile-nav
        -->
        <mobile-view/>

        <!-- Comment out the following 2 lines to test on the browser-->
        <script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script src="lib/index.js"></script>

        <!-- In production use min versions -->
        <script src="lib/jx.min.js"></script>
        <script src="lib/angular.js"></script>
        <script src="lib/angular-mobile.js"></script>
        <script src="lib/mobile-nav.js"></script>
        <script src="lib/jquery.min.js"></script>
<!--         // <script src="lib/angular-route.min.js"></script>
        // <script src="lib/angular-resource.js"></script>
        // <script src="lib/ui-bootstrap-tpls-0.11.0.min.js"></script> -->

        <script src="app/app.js"></script>
        <script src="app/main/mainController.js"></script>
        <script src="app/about/aboutController.js"></script>
        <script src="app/about/playController.js"></script>

        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

这是app.js

'use strict';

function jsonp_callback(data) {
    // returning from async callbacks is (generally) meaningless
    console.log(data.found);
}

var myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile']);

myApp.config(function ($compileProvider){
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})  
myApp.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'app/main/main.html',
      controller: 'MainCtrl'
    })
    .when('/play', {
      templateUrl: 'app/play/play.html',
      controller: 'PlayCtrl'
    })
    .when('/settings', {
      templateUrl: 'app/main/main.html',
      controller: 'MainCtrl'
    })
    .when('/options', {
      templateUrl: 'app/main/main.html',
      controller: 'MainCtrl'
    })
    .when('/about', {
      templateUrl: 'app/about/about.html',
      controller: 'AboutCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
}]);

myApp.run(function($rootScope, $location){
    // $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
    //     if(rejection === 'not-authorized'){
    //         $location.path('/');
    //     }
    //     if(rejection == 'authorized'){
    //         $location.path('/home');
    //     }
    // });
    var history = [];

    $rootScope.$on('$routeChangeSuccess', function() {
        history.push($location.$$path);
    });
    $rootScope.history = history;
});

我尝试使用超链接href="#/play" and within the controller $ location.path（'/ play'）;`来改变路线，但是没有任何作用; /

Answer 1

我认为，在注入ngRoute之前一切都无效。您还必须在Index.html中添加该文件。

angular-route.js现在是单独的文件。您必须手动注入该文件才能运行已定义的路由。

使用'a'html链接标记还有一件事你必须写href =“＃play”......

我不确定移动视图。所以如果它不起作用，请使用ng-view。

Answer 2

最后，我能够使用angular-mobile，ngRoute和没有hrefs来运行它。而不是他们，我在ng-click上使用了这个功能：

$scope.slidePage = function (path,type) {
    navSvc.slidePage(path,type);
};

当然有这项服务：

myApp.factory('navSvc', function($navigate) {

   return {
        slidePage: function (path,type) {
            $navigate.go(path,type);
        },
        back: function () {
            $navigate.back();
        }
    }
});

Angular需要页面刷新以加载新视图

2 个答案: