У меня есть компонент, который я пытаюсь создать, который принимает 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
. Как я могу заставить прядильщик скрыть, как только пользовательские данные были загружены, а остальная часть шаблона была обновлена.
ОБНОВИТЬ
Я должен упомянуть здесь, что эти директивы отображаются в повторяющейся сетке элементов, эта директива предназначена для того, чтобы действовать как карта пользовательского наведения, аналогичная facebook, когда вы нависаете над кем-то, и вы получаете popover с некоторой информацией о пользователе, поэтому мне бы очень хотелось, чтобы каждая итерация этой директивы была в состоянии стоять сама по себе, поскольку она стоит, теперь индикатор загрузки скрывается после того, как все директивы завершили загрузку своего свойства $scope.user
.
Просто удалите область действия из своей директивы и используйте $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;
});
},
};
}]);
Вы можете попробовать:
ng-hide="user.user_name.length > 0"
ng-hide
принимает выражение напрямую, не нужно заключать его в скобки.