Question

考虑这个可运行的示例http://plnkr.co/edit/a88cOYDVORDHQV3b5NGJ?p=preview

angular.module('app', ['ngRoute'])
.controller('myctrl',['$scope', '$timeout', function($scope, $timeout){
  $scope.myjson = [{title:'one'},{title:'two'},{title:'three'}];

  $scope.remove = function(idx){
    $scope.loading = true;
    $timeout(function(){ 
      $scope.myjson.splice(idx,1);
      $scope.loading = false
    }, 700)

  }
}])
.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
})
</script>

<div ng-controller="myctrl">
  <div ng-repeat="j in myjson">
  <a class="btn btn-default" 
  ng-bind-html=" loading? 
  ( '<i class=\'fa fa-refresh fa-spin\'></i>' | unsafe) : 
  ('Save' | unsafe)" 
  ng-disabled="loading"
  ng-click="remove($index)">Remove</a> 
  <b>{{j.title}}</b>
  </div>
</div>

超时是模拟http请求删除实体。如果只有一个按钮（例如登录或注册），则此方法有效。问题是每个实体都需要有各自的加载变量，我不知道该怎么做。我只想点击按钮来显示加载符号。对于像这样的许多按钮，我想我需要一个指令......

Answer 1

这就是他们发明Angular指令的原因。您可以创建具有隔离范围的指令，并将其应用于每个按钮。

angular.module('app', ['ngRoute'])
.controller('myctrl',['$scope', '$timeout', function($scope, $timeout){
  $scope.myjson = [{title:'one'},{title:'two'},{title:'three'}];
}]).directive('loader',function() {
  return {
    restrict: 'A',
    scope: true,
    controller: ['$scope', '$timeout', function($scope, $timeout) {
      $scope.remove = function(idx){
        $scope.loading = true;
        $timeout(function(){ 
          $scope.myjson.splice(idx,1); 
          $scope.loading = false
        }, 700)

      }
    }]
  };
})

我已将你的傻瓜改为demonstrate。

在http请求期间禁用和显示按钮上的加载签名的指令

1 个答案: