CODEWITHSUNDEEP
angularjscordova
Lucas Garcia
Lucas Garcia

Reputation: 917

Phonegap with Angular: deviceready not working properly

I believe I have set everything for Angular to work in Phonegap, but apparently the deviceready function is not having the behavior that I expect.

So here is how I set:

index.html

<html ng-app="app">
    <head>
        <script type="text/javascript" src="js/lib/angular.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/lib/ready.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
        <div class="header" ng-controller="HeaderController">
            <h3 id="logo"><img src="img/logo.png"/></h3>
            <p>{{title}}</p>
            <button ng-click="changeTitle()"></button>
        </div>
    </body>
</html>

app.js

$app = angular.module('app', ['fsCordova']);

$app.config(function($compileProvider){
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});

$app.controller('HeaderController', function($scope, CordovaService) {
    CordovaService.ready.then(function() {
        console.log("Setting the title");
        $scope.title = "This title";

        $scope.changeTitle = function() {
            console.log("Changing the title");
            $scope.title = "Title changed";
        }
    });
});

ready.js from: http://www.ng-newsletter.com/posts/angular-on-mobile.html#native

angular.module('fsCordova', [])
    .service('CordovaService', ['$document', '$q',
        function($document, $q) {

            var d = $q.defer(),
                resolved = false;

            var self = this;
            this.ready = d.promise;

            document.addEventListener('deviceready', function() {
                resolved = true;
                d.resolve(window.cordova);
            });

            // Check to make sure we didn't miss the
            // event (just in case)
            setTimeout(function() {
                if (!resolved) {
                    if (window.cordova) d.resolve(window.cordova);
                }
            }, 3000);
        }]);

The title is appearing the way it is {{title}}, not its value. When I click the button, nothing happens, not even the debug logs on the console. Any tips how to set Angular on Phonegap? Thanks.

Upvotes: 1

Views: 1063

Answers (1)

Lucas Garcia
Lucas Garcia

Reputation: 917

Apparently on angular 1.2 the urlSanitizationWhitelist doesn't exist anymore. So I just had to remove the $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); line and it worked

Upvotes: 1

Related Questions