CODEWITHSUNDEEP
angularjsionic-frameworkangularjs-directive
Bas Kuis
Bas Kuis

Reputation: 770

Angular directive not rendering with templateUrl in ionic app

In chrome - both variants work. However, when emulating ios - the directive using templateUrl does not work.

This does not work in the ios emulator but does work in the browser:

angular.directive('listitems', function(ApiEndpoint) {
  return {
    restrict: 'A',
    templateUrl: '../template/listitems.ng.html',
    scope: true
  };
})

This works in the ios emulator and works in the browser:

angular.directive('listitems', function(ApiEndpoint) {
  return {
    restrict: 'A',
    template: '<strong>listitems</strong>',
    scope: true
  };
})

Elsewhere using templateUrl works just fine in both the browser and ios emulator. For example when using ui router - I'm able to load external templates without issues:

$stateProvider.state('app.dashboard', {
  url: "/dashboard",
  views: {
    'menuContent': {
      templateUrl: '../template/dashboard.ng.html',
      controller: 'DigstackDashboard'
    }
  }
});

My question is - in the case of the directive, why would the templateUrl value not work only in the ios emulator?

Upvotes: 0

Views: 436

Answers (1)

Bas Kuis
Bas Kuis

Reputation: 770

Found the issue! I hope this will help somebody else.

angular.config(function($sceDelegateProvider){
    $sceDelegateProvider.resourceUrlWhitelist([
         'self',
         'https://www.example.com/**'
    ]);
 }

Even though in uirouter - this does not seem to be needed. In the ios emulator - this configuration was required to get templates to load.

Upvotes: 0

Related Questions