4

I need to pass a route parameter to the server responding with a template, so I'm trying to use a templateProvider per several articles/other stack overflow docs.

I'm not getting any javascript errors, but the following templateProvider method is never even executed. When the templateUrl property is not commented out, this route works fine. 

$stateProvider
.state('org.contacts.add', {
  url: '/add',
  views: {
    'org@': {
      // templateUrl: '/templates/issues/add',
      controller: 'ContactsAddController',
      templateProvider: function($route, $templateCache, $http) {
          var url = '/templates/' + $route.current.params.org + '/contacts/add';
          $http.get(url, {cache: $templateCache}).then(function(html){
              return html;
          });
      }]
    }
  }
})

After some experimentation, it seems the $route was causing trouble. Taking that out and using $stateParams at least fires this code/controller.

However, while I see the ajax call firing and the proper html response, it's never loaded to the view.

    templateProvider: function ($stateParams, $http, $templateCache) {
        var url = '/templates/contacts/add';
        $http.get(url, {cache: $templateCache}).then(function(html){
            return html;
        });
    }
helion3
  • 34,737
  • 15
  • 57
  • 100

1 Answers1

4

I'm guessing you need to return a $promise for this to work. Check out the example used on the UI-Router wiki:

$stateProvider.state('contacts', {
  templateProvider: function ($timeout, $stateParams) {
    return $timeout(function () {
      return '<h1>' + $stateParams.contactId + '</h1>'
    }, 100);
  }
})

Notice the line that begins with return $timeout(.... Have you tried returning the $promise that is created by doing $http.get()?

Sunil D.
  • 17,983
  • 6
  • 53
  • 65
  • This helped me realize that by taking out `$route`, and using `$stateParams`, I'm at least getting the route to apply and the controller to load. I'm now seeing almost everything work - the http request is made, the params are right, yet the HTML response is never loaded into my view. I'll update my question with the new code – helion3 Dec 07 '14 at 18:55
  • Returning the http promise directly just injects `[object Object]` into the view. – helion3 Dec 07 '14 at 19:00
  • 1
    Yay, solved it. Looking at the source for angular ui-router itself, this is what they used: `return $http.get(url, {cache: $templateCache }).then(function(response){return response.data;});` – helion3 Dec 07 '14 at 19:17