8

我尝试将 angular.js 与 PhoneGap 一起使用。它在 chrome 浏览器上运行良好。但它不适
用于 ng-view 标签。当我在模拟器上运行 angular 模块时，它不会被调用。你有什么主意吗？

我的代码是这样的。

索引.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('');
    }
};

路由器.js

angular.module("app",[]).
    config(["$routeProvider",function($routeProvider){
        $routeProvider.when("/",{templateUrl:"templates/home.html"});
    }]);
4

3 回答 3

11

尝试使用 bootstrap api 方法在 deviceReady 上手动启动应用程序。就像是：

function onDeviceReady() {
    ...
    angular.bootstrap(document, ['ngView']);
    ...
}

document.addEventListener("deviceready", onDeviceReady, true);

http://docs.angularjs.org/api/angular.bootstrap

于 2012-09-30T10:42:59.677 回答
0

尝试从该服务器下载 angularjs 和 zepto 文件，然后将其放置在应用程序中。

于 2012-09-28T06:14:12.817 回答
0

我只花了大约 5 个小时试图解决类似的问题。事实证明，phone-gap / cca 出于某种原因将 app-id 附加到 URL 的哈希部分。因此，路由不匹配，并且用户不断被$routeProvider.otherwise()呼叫转发回去。

（从那以后，我发现这是CCA的一个已知问题，甚至已经修复，只是没有发布！）

无论如何，如果您在让 ngRoute 与 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，它将匹配所有/大多数路由！

于 2014-03-27T23:51:59.667 回答