角度需要页面刷新加载新视图

我正在尝试开发一个应用程序使用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（'/玩'）;`但没有任何作品;/

来源

2014-07-19 user3127242

你尝试使用NG-视图，而不是移动视图，并尝试与代码简单的角度 –

是的，仍然无法正常工作。我认为这个问题可能在ngRoute中，因为我没有包含它，但是当我这样做，并且将它注入应用程序依赖项时，我得到以下错误：“未捕获的错误：未知的提供程序：$ sceProvider < - $ sce < - $ route < - $ navigate“ – user3127242

你必须包含路由文件，否则它不会工作 –

我认为，直到你注入ngRoute什么都不会工作。您必须在Index.html中添加该文件。

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

还有一件事你必须写HREF =“＃玩”“A”的HTML链接标记......

我不知道有关移动视图。所以使用ng-view如果不起作用。

来源

2014-07-19 12:07:58 micronyks

谢谢，hrefs是问题，但现在没有历史记录，当我按回时什么都没有发生;/ – user3127242

它是否在没有ngRoute的情况下工作？ – micronyks

nope，ngRoute是我反正添加的东西，但它仍然没有工作...在最后我使用了这个服务，我将作为下面的另一个答案发布，以便代码更具可读性 – user3127242

最后我能够使用angular-mobile，ngRoute和无hrefs来运行它。相反，他们中的我用这个功能NG-点击：

$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(); 
     } 
    } 
});

来源

2014-07-20 16:43:55 user3127242

角度需要页面刷新加载新视图

回答

相关问题