Menu
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?
774
I had this same exact problem actually. Your problem is here:
templateUrl: '/views/partials/header.html',
You need to remove that initial slash and use a relative path. In my case I had '/scripts/directives/templates/bottom-menu.html' and my template did not work. I removed the first slash and it worked perfectly.
The reason is that when it's deployed to android these files are no longer in the root directory, so that first slash breaks the path.
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
