Phonegap with Angular - directives not showing and strange view display

I am trying to build a Phonegap application using Angular.js

I am trying to this: When a user logs in, a heading will be displayed to the user.

I have directive in directive.js :

angular.module('myApp')
.directive('ngHeaderline', ['Auth', function(Auth) {
  return {
    templateUrl: '/views/partials/header.html',

    replace: true,
    scope: true,
    link: function($scope) {
      $scope.isAuthenticated = Auth.isLoggedIn;
      $scope.logout = Auth.logout();
    }
  }
}]);

And let's presume all the elements are there. Auth factory and the template (everything is displaying fine when I test it on Chrome browser)

And then in my index.html I have:

 <body>


<div ng-headerline></div>

    <div class="main-content">
        <div ng-errorline></div>
        <div ng-loadingline></div>
        <div ng-view=""></div>
    </div>

  <!-- Foundation JS dependencies -->

  <script src="bower_components/foundation/js/vendor/custom.modernizr.js"></script>
  <script src="bower_components/foundation/js/foundation/foundation.js"></script>


    <script src="scripts/vendor/cordova.js"></script>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/jquery.formatDateTime/jquery.formatDateTime.js"></script>
    <script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

    <script src="bower_components/foundation/js/foundation/foundation.js"></script>
    <script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>

    <script src="scripts/controllers/main.js"></script>




    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>

</body>

And my header.html partial looks like this:

<div class="app">

<div ng-show="isAuthenticated()">
My Header
</div>

</div>

To repeat, everything is showing correctly when I est it on browser, but when I compile with Phonegap and deploy to the Android device, header is not showing.

What could be the problem?

Phonegap with Angular - directives not showing and strange view display

1 Answers