Currently, I am utilizing yeoman to create an Angular application and then deploying it using phonegap onto a mobile platform - specifically iOS. However, I have encountered some difficulties in getting directives to function properly.
One of the directives that I have created is called "header," which essentially displays a header. Here is the code snippet for this directive:
angular.module('myappApp').directive('header', function(contentUpdater) {
function link(scope) {
scope.contentUpdater = contentUpdater;
scope.headerTextThin = scope.contentUpdater.getHeaderTextThin();
scope.headerTextBold = scope.contentUpdater.getHeaderTextBold();
}
return {
restrict: 'E',
link: link,
scope: {
},
templateUrl: 'header.html'
};
});
Although the directive appears correctly in the browser, it fails to display when I simulate it with 'phonegap run ios.' I have made sure that the header.html file is located under app/scripts/directives/header.html and the corresponding JavaScript file is placed in app/scripts/directives/header.js.