Question

当我按下按钮时，我想显示加载图标（微调器）请求从控制器到服务器。这需要一些时间才能回复，我需要显示任何加载图标。一旦服务器响应控制器，我只想禁用加载图标。

Html：

 <div class="modal-content" style="margin-top:135px">
                                                    <div class="modal-header">

                                                        <h4 class="modal-title pull-left"> Add New Role</h4>
                                                        <button type="button" class="close pull-right"
                                                                data-dismiss="modal" aria-hidden="true" title="Close">
                                                            x
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="row" style="margin-bottom:1%">
                                                            <div class="col-xs-3">
                                                                <h6><strong>Role<span style="color:green;">*</span></strong></h6>
                                                            </div>
                                                            <div class="col-xs-9">
                                                                <input type="text" required name="RoleName" placeholder="Role Name" onkeyup="convertToUppercase(this)" 
                                                                       class="form-control" ng-model="Role.RoleName" ng-change="verifyRoleDuplicate()" />

                                                            </div>
                                                        </div>

                                                        <div class="row" style="margin-bottom:1%">
                                                            <div class="col-xs-3">
                                                                <h6><strong> Description</strong></h6>
                                                            </div>
                                                            <div class="col-xs-9">
                                                                <textarea name="Description"
                                                          style="width: 100%; max-height: 200px; max-width: 100%;" ng-model="Role.Description" maxlength="255"></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="row" style="margin-bottom:1%">
                                                            <div class="col-xs-3">
                                                                <h6><strong>IsActive?</strong></h6>
                                                            </div>
                                                            <div class="col-xs-9">
                                                                <input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn btn-primary" ng-click="AddRole()" ng-disabled="disableds || profileformAdd.$invalid" data-dismiss="modal"  title="Save">Save</button>&nbsp;&nbsp;
                                                        <button class="btn btn-primary" data-dismiss="modal"  title="Cancel" >Cancel</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    </div>
                                                </div>

控制器：

 $scope.AddRole = function () 
    {
        $http.post('/AddNewRole', $scope.Role).then(function (response) {
            //console.log(response);
            $notify.success('Success', "New Role" + " '" + $scope.Role.RoleName +"' " +  "is  inserted Successfully");
             refresh();
            $scope.Role='';
        })
    };

当我点击添加按钮它将打开弹出窗口，弹出窗口有两个按钮如果我单击保存按钮我想显示加载图标。保存功能完成后应隐藏加载图标。

Answer 1

您可以使用css或svg加载程序。简单的加载器示例如下所示。

演示：http://codepen.io/sumitridhal/pen/gWWORr

<强> HTML

<div class="container" ng-app="myApp">
  <div ng-controller="myController">
    <a href="#" class="btn btn-primary" role="button" ng-click="toggle()">Button</a>
    <div class="loader loader--style1" title="0" ng-if="load">
      <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
  <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
    C22.32,8.481,24.301,9.057,26.013,10.047z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 20 20"
      to="360 20 20"
      dur="0.5s"
      repeatCount="indefinite"/>
    </path>
  </svg>
    </div>
  </div>
</div>

<强> CSS

body{
  padding: 1em;
  background: #2B3134;
  color: #777;
  text-align: center;
  font-family: "Gill sans", sans-serif;
  width: 80%;
  margin: 0 auto;
}
h1{
  margin: 1em 0;
  border-bottom: 1px dashed;
  padding-bottom: 1em;
  font-weight: lighter;
}
p{
  font-style: italic;
}
.loader{
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}

/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FF6700;
}

<强> JS

(function(){

    var myApp = angular.module('myApp', []);

    myApp.controller('myController', function($scope, $timeout){
      $scope.load = false;  
      $scope.toggle = function (){
        $http.get(someUrl).success(function(){
          $scope.load = true;
           // Logic goes here
          $scope.load = false;
        }).error(function(){
          $scope.load = true;
           // Logic goes here
          $scope.load = false;
       })

      }



    });

})();

如何使用带角度的装载面板

1 个答案: