angular-tooltips v.resolve is not a function

My company has recently inherited the support of a project that was built from the MEAN.js starter with Angular 1.3. It is using the angular-tooltips library to display some user information on hover of a page element. There is a problem whereby the tooltip fails to load when the page is first loaded but works fine after a page refresh.

It is throwing this error:

angular.js:11706 TypeError: v.resolve is not a function
at Y (angular-tooltips.js:546)
at q (angular-tooltips.js:570)
at angular.js:6895
at Scope.$eval (angular.js:14570)
at Scope.$digest (angular.js:14386)
at Scope.$apply (angular.js:14675)
at done (angular.js:9725)
at completeRequest (angular.js:9915)
at XMLHttpRequest.requestLoaded (angular.js:9856)

The code at that line appears to that which handles when the tooltip template is updated. Code:

...
         , onTooltipTemplateChange = function onTooltipTemplateChange(newValue) {

        if (newValue) {

          showTemplate(newValue);
        } else {

          hideTemplate();
        }
      }

...

Here is the link to the code in the source repo.

I feel like the issue could have something maybe to do with the the template not being loaded in time for the tooltip to render.

This is the full code in the directive.

'use strict';

angular.module('core').directive('userHoverList', ['$compile', '$rootScope', function($compile, $rootScope) {
  return {
    restrict: 'A',
    scope: {
      model: '=model',
      type: '@type',
      postId: '=postId',
      submissionId: '=submissionId',
      commentId: '=commentId',
      replyId: '=replyId'
    },
    link: function ($scope, element, attrs) {

      // Add the attributes required by the angular-tooltips directive and recompile.  Only bother if the collection in
      // question has at least 1 item.
      $scope.decorateElement = function() {

        // Add the tooltip attribute
            element.attr('tooltips', '');

        // Point to the proper view template
            element.attr('tooltip-template-url', '/modules/core/client/directives/user-hover-list/user-hover-list.client.view.html');

        if($scope.model[$scope.type].length > 0) {
          element.attr('tooltip-show-trigger', 'mouseenter');
        }
        else {
          element.attr('tooltip-show-trigger', 'blur');
            }

            element.attr('tooltip-hide-trigger', 'mouseleave');

        // Remove the user-hover-list attribute to prevent this directive from infinitely compiling
            element.removeAttr('user-hover-list');

        // Trigger a compile with the newly added tooltips attribute
            $compile(element)($scope);

      };

      $scope.openUserModal = function() {
        $rootScope.userModalPostId = $scope.postId;
        $rootScope.userModalSubmissionId = $scope.submissionId;
        $rootScope.userModalCommentId = $scope.commentId;
        $rootScope.userModalReplyId = $scope.replyId;
        $rootScope.userModalType = $scope.type;
        $rootScope.$broadcast('showUserModal');
      };

      $scope.initialize = function() {
        $scope.decorateElement();

        // Create the "... and x more"
        if($scope.model[$scope.type].length > 5) {
          $scope.moreCount = '...and ' + ($scope.model[$scope.type].length - 5) + ' more';
        }
          };

      $scope.initialize();
    }
  };    
}]);

After debugging, the error is happening on this line $compile(element)($scope);

I found this JSFiddle that has implemented something similar but uses a service and $timeout which i tried to wrap the $compile(element)($scope); function in but this just caused the element to not load at all.

Note: This project is using:

  • Angular: 1.3

  • Angular Tooltips: 1.2.2

Source: AngularJS