angular.js在PhoneGap中不起作用ng-view標簽
[英]angular.js doesn't work ng-view tag in PhoneGap
問題描述
我嘗試將angular.js與PhoneGap一起使用。它在chrome瀏覽器上運行正常。但它不起作用
在ng-view tag.And角度模塊在我在模擬器上運行時不會調用。 你有什么主意嗎？
我的代碼是這樣的。
的index.html
<body>
<div class="app" >
<h1>Welcome!</h1>
<div id="deviceready">
<div ng-view></div>
</div>
</div>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"> </script>
<script type="text/javascript" src="js/router.js"></script>
</body>
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
},
report: function(id) {
console.log("report:" + id);
// hide the .pending <p> and show the .complete <p>
document.querySelector('#' + id + ' .pending').className += ' hide';
var completeElem = document.querySelector('#' + id + ' .complete');
completeElem.className = completeElem.className.split('hide').join('');
}
};
router.js
angular.module("app",[]).
config(["$routeProvider",function($routeProvider){
$routeProvider.when("/",{templateUrl:"templates/home.html"});
}]);
3 個解決方案
解決方案1
11 已采納 2012-09-30 10:42:59
嘗試使用bootstrap api方法在deviceReady上手動啟動應用程序。 就像是：
function onDeviceReady() {
...
angular.bootstrap(document, ['ngView']);
...
}
document.addEventListener("deviceready", onDeviceReady, true);
解決方案2
0 2012-09-28 06:14:12
嘗試從這些服務器下載angularjs和zepto文件，然后放在應用程序中。
解決方案3
0 2014-03-27 23:51:59
我只花了5個小時試圖解決類似的問題。 事實證明，phone-gap / cca出於某種原因將app-id添加到URL的哈希部分。 因此路由不匹配，並且$routeProvider.otherwise()調用不斷地轉發用戶。
（我已經發現這是CCA的一個已知問題 ， 即使沒有發布也已修復 ！）
無論如何，如果你在使用mobile-chrome-tools和Phonegap時遇到問題，請嘗試在路由中添加兩個可選的匹配組作為解決方法。 例如，舉個例子：
$routeProvider.when('/', { templateUrl: 'templates/home.html', controller: 'HomeCtrl' });
$routeProvider.when('/some-page', { templateUrl: 'templates/some-page.html', controller: 'SomePageCtrl' });
$routeProvider.when('/another-page', { templateUrl: 'templates/another-page.html', controller: 'AnotherPageCtrl' });
$routeProvider.otherwise({ redirectTo: '/' });
路由不會與添加到URL的額外位匹配，但您可以像這樣處理它：
$routeProvider.when('/:a?/:b?/some-page', { templateUrl: 'templates/some-page.html', controller: 'SomePageCtrl' });
$routeProvider.when('/:a?/:b?/another-page', { templateUrl: 'templates/another-page.html', controller: 'AnotherPageCtrl' });
$routeProvider.when('/:a?/:b?/', { templateUrl: 'templates/home.html', controller: 'HomeCtrl' });
$routeProvider.otherwise({ redirectTo: '/' });
請注意我添加的兩個可選組。 另請注意，基本路由是最后一個 - 否則，如果正確生成URL，它將匹配所有/大多數路由！
Angular (1.4.7) ng-view 中的 JavaScript 不起作用
[英]JavaScript inside Angular's (1.4.7) ng-view doesn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.