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

我正在尝试使用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'); '改变路由，但没有任何作用;/

我认为，除非你注入ngRoute，否则什么都不会起作用。您还必须在Index.html中添加该文件。

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

关于'a' html链接标签还有一件事你必须写href="#play"…

我不确定移动视图。

最后，我用angular-mobile、ngRoute和没有refs让它运行起来了。我在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();
        }
    }
});

相关内容

最新更新

热门标签：