angular-tooltips v.resolve is not a function

353
December 07, 2017, at 08:08 AM

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

Rent Charter Buses Company
READ ALSO
The regular expression doesn't work equal in different code even being the same input

The regular expression doesn't work equal in different code even being the same input

I'm creating a code, a part of this code uses a regular expression which is:

191
How to handle error in mongoose in Node.js app

How to handle error in mongoose in Node.js app

I'm developing a nodejs app with express and mongoDb and mongoose

243
Accessing Header Attributes from Response in Relay Middleware

Accessing Header Attributes from Response in Relay Middleware

I am trying to set a custom header in my server response called CoolThe problem I am running into is that I cannot access the custom header in my response in my Relay network layer settings

205