javascript - Directive is being rendered before promise is resolved

Question

I am having issues getting my directive to render its content only after my promise has been resolved. I thought then() was supposed to do this but it doesn't seem to be working..

Here is my controller:

// Generated by CoffeeScript 1.6.3
(function() {
  var sprangularControllers;

  sprangularControllers = angular.module('sprangularControllers', ['sprangularServices', 'ngRoute']);

  sprangularControllers.controller('productsController', [
    '$scope', '$route', '$routeParams', 'Product', 'Taxonomy', function($scope, $route, $routeParams, Product, Taxonomy) {
      Taxonomy.taxonomies_with_meta().$promise.then(function(response) {
        return $scope.taxonomies = response.taxonomies;
      });
      return Product.find($routeParams.id).$promise.then(function(response) {
        return $scope.currentProduct = response;
      });
    }
  ]);

}).call(this);

My directive:

// Generated by CoffeeScript 1.6.3
(function() {
  var sprangularDirectives;

  sprangularDirectives = angular.module('sprangularDirectives', []);

  sprangularDirectives.directive('productDirective', function() {
    return {
      scope: {
        product: '='
      },
      templateUrl: 'partials/product/_product.html',
      link: function(scope, el, attrs) {
        console.log(scope);
        console.log(scope.product);
        return el.text(scope.product.name);
      }
    };
  });

}).call(this);

Scope returns okay, and when I check it in dev tools scope.product is not undefined however I am presuming that is because by the time I check it the promise has been resolved?

console.log(scope.product) however, returns undefined..

Answer 1

As stated in an official thread about this issue (quickly closed as "won't fix because it would make directives wait"), a workaround is to wrap your directive in a ng-if :

<div ng-if="myPromiseParam">
  <my-directive param="myPromiseParam">
</div>