27

PhoneGapのngViewに問題があります。

すべてが正常にロードされているようで、ng-controllerを使用して基本的なコントローラーを動作させることもできます。しかし、ngViewでルーティングを使用しようとすると、何も起こりません。

index.html

<!doctype html>
<html ng-app>
<head>
    <script type="text/javascript" src="lib/cordova-2.4.0.js"></script> 
    <script type="text/javascript" src="lib/angular-1.0.4.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>

<a href="#/test">Test</a>

<div ng-view></div>

</body>
</html>

app.js

angular.module('App', []).config(function ($routeProvider) {

    $routeProvider.when('/test', {
        controller: TestCtrl,
        template: '<h1> {{ test }} </h1>'        
    });

});

function TestCtrl($scope) {
    $scope.test = "Works!";
}

onMessage(onPageFinished, fle:///android_asset/www/index.html#/test)リンクをクリックするたびにEclipseロガーが表示されますが、リンクをクリックせずに試してみると#、パスが見つからないというエラーが発生します。

私が他のどこでも準備したものから、これはうまくいくはずです。どんな助けでも大歓迎です。

4

5 に答える 5

43

いくつかの質問やフォーラムを検索した後、ようやく確実に機能するようになりました。これは、クリーンなPhoneGapプロジェクトから実行するのにかかったものです。

index.html

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>

    <a href="#/">Main View</a>
    <a href="#/view">New View</a>

    <div ng-view></div>

    <!-- Libs -->
    <script type="text/javascript" src="lib/cordova-2.5.0.js"></script>
    <script type="text/javascript" src="lib/angular-1.0.5.js"></script>

    <!-- App -->
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/routers.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

<html ng-app="App">タグに注意してください。ディレクティブの値がないとアプリは読み込まれないため、必ず値を含めてください。

index.js

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, true);
    },

    onDeviceReady: function() {
        angular.element(document).ready(function() {
            angular.bootstrap(document);
        });
    },
};

このファイルでは、PhoneGapが'ondeviceready'イベントを発生させたときにAngularを手動でブートストラップしています。

routers.js

angular.module('App', [])
.config(function ($compileProvider){
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(function ($routeProvider) {

    $routeProvider
    .when('/', {
        controller: TestCtrl,
        templateUrl: 'partials/main.html'
    })
    .when('/view', {
        controller: ViewCtrl,
        templateUrl: 'partials/view.html'
    });
});

このファイルには2つの重要なものが含まれています。まず、で前に使用したのと同じ名前でモジュールを作成します<html np-app="App">。次に、ファイルURIをホワイトリストに登録するようにルーターを構成する必要があります。個人的には必要ありませんでしたが、何人かが遭遇したようですので、含めました。

controllers.js

function TestCtrl($scope) {
    $scope.status = "It works!";
}

function ViewCtrl($scope) {
    $scope.status = "Also totally works!";
}

最後に、いくつかの基本的なコントローラーだけです。

ここで、これらすべてを使用してgithubリポジトリを作成しました。

これが他の誰かに役立つことを願っています。

于 2013-03-26T21:50:56.167 に答える
5

私の問題は、ドメインのホワイトリストに登録することでした。

基本的に、.configは次のようになります。

angular.module('App', []).config(function ($routeProvider, $compileProvider) {

    $routeProvider.when('/test', {
        controller: TestCtrl,
        template: '<h1> {{ test }} </h1>'        
    });
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
于 2013-03-13T00:04:36.667 に答える
2

FWIW-この問題に対する私の2セントは次のとおりです。

上記のすべてが機能し、機能するアプリに向けて私を昇進させたように見えましたが、それでも$routeproviderでページ間を移動することができませんでした...

私の最後の問題は-jqueryMobileライブラリのスクリプトタグ内にインクルードがあり、Angularがそれらを取得する前にURLリクエストをハイジャックしていました。私がそれを削除したとき、ナビゲーション要求は最終的に$ routeproviderに到達し、すべてが正常に機能しています。

これが誰かを助けることを願っています...

于 2014-10-04T11:44:14.687 に答える
1

Google Chromeでローカルアクセスポリシーフラグを無効にすることで、問題を解決することができました。

$ open -a Google\ Chrome --args --disable-web-security for Mac OS.

ローカルアクセスファイルポリシーを無効にする方法へのリンクは次のとおりです。

于 2013-08-28T21:18:43.790 に答える
0

Angular1.2はメソッドを提供しません

$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/)

とにかく、もう必要ないようです。私は自分の携帯電話でそれをテストしました、そしてそれはなしで動作します。

于 2013-08-15T18:47:50.930 に答える