Directive template update when scope property updates

Question

I have a component I'm trying to build that accepts a user_id and then loads user information for it in the background, and then drops an element on the page with another directive attached to it.

So far this is what I have

<user-popover user-id="item.item_high_bid_user_id"></user-popover>

angular.module('bidrAdminApp')
  .directive('userPopover', ['Data', function (Data) {
    return {
      template: '<a bb-popover-template="user-popover-content.html">{{user.user_name}}</a><i ng-hide="{{user}}" class="fa fa-spinner fa-spin" aria-hidden="true"></i>',
      scope: {
        userId: '=',
        user: '=*'
      },
      restrict: 'E',
      controller: function($scope, $element, $attrs, Data){
        Data.getUser($scope.userId).then(function(userData){
          $scope.user = userData.data;
        });
      },
    };
  }]);

I'm getting data loading in the background from my Data service and the user.user_name in the template gets updated correctly, the issue is the spinner is not being hidden when the $scope.user gets updated. How can I get the spinner to hide once the user data has been loaded in and the rest of the template has been updated.

UPDATE

I need to mention here that these directives show up in a repeating grid of items, this directive is intended to act sort of like a user hover card, similar to facebook when you hover over someone and you get a popover with some information about the user, so I would really like each iteration of this directive be able to stand on its own, as it stands now the loading indicator hides after all the directives have finished loading their $scope.user property.

just drop the 'user: '=*'' part in your directive scope, should be fine i guess. — Gatsbill, Jul 25 '16 at 19:11

v0d1ch · Answer 1 · 2016-07-25T19:14:48.807

0

You could try:

ng-hide="user.user_name.length > 0"

edited Jul 25 '16 at 19:14

answered Jul 25 '16 at 19:10

v0d1ch

2,738
1
22
27

No the spinner is still there. – Jordan Jul 25 '16 at 19:12
`ng-hide` takes an expression directly, no need to wrap it with brackets. – Emile Bergeron Jul 25 '16 at 19:14
1

Right I edited the answer, also the property is user_name not name – v0d1ch Jul 25 '16 at 19:15
Ah I see what's happening, the spinner removes when the last directive on the page finishes loading, is this a scope problem? – Jordan Jul 25 '16 at 19:19
btw why did you bind scope property with "=*" ? just curious – v0d1ch Jul 25 '16 at 19:19
So you have more directives on the page like this? – v0d1ch Jul 25 '16 at 19:20
yes I have a repeating grid of items, these items have bidders, represented as this user-popover directive (think facebook when you hover over a user you get a popover with their info) – Jordan Jul 25 '16 at 19:35

score 0 · Answer 2 · answered Jul 25 '16 at 19:22

Just remove the scope from your directive and use $attrs.userId

angular.module('bidrAdminApp')
  .directive('userPopover', ['Data', function (Data) {
    return {
      template: '<a bb-popover-template="user-popover-content.html">{{user.user_name}}</a><i ng-hide="{{user}}" class="fa fa-spinner fa-spin" aria-hidden="true"></i>',
      restrict: 'E',
      controller: function($scope, $element, $attrs, Data){
        Data.getUser($attrs.userId).then(function(userData){
          $scope.user = userData.data;
        });
      },
    };
  }]);

Directive template update when scope property updates

2 Answers2