Question

我有一个组件，我尝试构建接受user_id，然后在后台加载它的用户信息，然后在页面上放置一个元素，并附加另一个指令。< / p>

到目前为止，这就是我所拥有的

<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得到正确更新，问题是当{{1}时，微调器未被隐藏得到更新。如何在加载用户数据并更新模板的其余部分后，如何隐藏微调器。

更新

我需要在这里提一下，这些指令出现在一个重复的项目网格中，这个指令的行为有点像用户悬停卡，类似于当你将鼠标悬停在某个人身上时你会得到一个带有一些信息的popover关于用户，所以我真的希望这个指令的每次迭代能够独立存在，因为现在加载指示器在所有指令完成加载它们的$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;
        });
      },
    };
  }]);

范围属性更新时的指令模板更新

2 个答案: