Обновление шаблона директивы при обновлении свойств области видимости

Question

У меня есть компонент, который я пытаюсь построить, который принимает user_id, а затем загружает в него информацию об этом в фоновом режиме, а затем удаляет элемент на странице с помощью другой директивы, прикрепленной к нему.

До сих пор это то, что у меня есть

<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; 
     }); 
     }, 
    }; 
    }]); 

я получаю загрузку данных в фоновом режиме с моей Data службы и user.user_name в шаблоне получает правильно обновляется, проблема вертушка не прячась когда обновляется $scope.user. Как я могу заставить прядильщик скрыть, как только пользовательские данные были загружены, а остальная часть шаблона была обновлена.

UPDATE

мне нужно упомянуть, что эти директивы появляются в повторяющейся сетке элементов, эта директива предназначена действовать вроде как парений карты пользователя, похожего на Facebook при наведении на кого-то и вы получаете информацию о пользователе, поэтому мне бы очень хотелось, чтобы каждая итерация этой директивы была в состоянии стоять сама по себе, поскольку она стоит, теперь индикатор загрузки скрывается после того, как все директивы завершили загрузку своего свойства $scope.user.

Answer 1

Вы можете попробовать:

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

Answer 2

Просто удалите сферу из вашей директивы и использовать $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; 
     }); 
     }, 
    }; 
    }]);