AngularJS 和 PhoneGap:$location.path 导致后续 tempateUrl 查找失败 [英] AngularJS and PhoneGap: $location.path causes subsequent tempateUrl lookup to fail

问题描述

我无法使用 AngularJS v1.2.0 和 PhoneGap/Cordova Android 应用程序进行路径查找.通过在 index.html 中设置 <base href="."/> 然后更改 $routeProvider，我已经使用 html5mode(true).when('/') 到 $routeProvider.when('/android_asset/www/index.html').之后，我可以让 redirectTo('login') 到达 $routeProvider.when('/login') 并渲染 templateUrl: 'static/partials/login.html' 符合预期.

I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.

我遇到的问题是，如果我尝试使用 $location.path('/login'); 从我的 Javascript 代码重定向到登录页面，则会找到路由，但 templateUrl 正在加载因 insecurl 异常而失败.

The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.

我已经尝试使用新的 angular-sanitize 模块将 file://的访问权限列入白名单，但这无济于事.

I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.

如何让 $location.path() 做与 redirectTo 相同的事情，以便加载部分?或者有其他方法可以解决这个问题吗?

How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?

更新:通过在路径函数之后添加对 replace() 的调用，我得到了一些进展，例如:

UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:

$location.path('/login').replace();

但这似乎是一种黑客行为，它仍然导致其他路由中的 templateUrl 因相同的异常而失败.

but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.

任何关于可能出错的想法?是不是 html5mode(true) 目前对 Phonegap 不起作用，解决此问题的唯一方法是将其设置为 false 并向每个路径添加主题标签(就像在 angular phonegap 种子项目)?

Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?

推荐答案

为了将来参考，这是我设法解决问题的方法:

For future reference, this is how I managed to solve the problem:

1. AngularJS 目前似乎不支持 Cordova 应用程序中的 html5mode(true)，因为我报告了 insecurl 问题.我必须做的是添加

1. AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add

var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);

这使我可以在 PhoneGap index.html 中使用全局变量显式设置 html5Mode:

which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:

<script>
  var html5Mode = false;
</script>

所以现在 $location.path('/login') 以及 redirectTo: 'login' 工作，但链接在 html 文件中，不要'吨.为了让那些在 PhoneGap 中工作的人在禁用 html5Mode 的情况下，我必须在每个链接前添加 #/，例如登录.

So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. <a href="#/login">login</a>.

这使 PhoneGap 可以工作，但破坏了使用带有 html5Mode(true) 的 History API 的网页.最后一块拼图是将 <base href="/"/> 添加到网页的 index.html(并将其排除在 PhoneGap 项目的 index.html 之外.)所以现在即使我在网页中有一个 #/login 的链接，我也可以访问 url http://example.com/login 而不是查看地址栏中的所有哈希值.

That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.

**

所以最后我在我的网页中使用了 History API并且在 PhoneGap 项目中禁用了 History API(这里实际上不需要 History API，因为没有地址栏).唯一的缺点是我必须在每个模板 html 文件中添加额外的 #/，但与在 Web 和移动设备上使用所有相同 html 和 javascript 文件的能力相比，这是一个小麻烦.

So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.

这篇关于AngularJS 和 PhoneGap:$location.path 导致后续 tempateUrl 查找失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！