Question

任何人都可以帮我解决如何在http调用成功时禁用锚标记并在出错时启用它，反之亦然

这是我的Html页面

<a href="#" id="register_pointer" data-toggle="modal" data-target="#myModal1">
    <div class="plus">
        <i class="fa fa-2x fa-plus"></i>
    </div>
    <div class="register">
        <h4>Create</h4>
        <p>New Account</p>
    </div>
</a>

这是我的控制器

$scope.MqUser=[];
$scope.getMqUser = function() {
    usSpinnerService.spin('spinner-1');
    MQDetailsService.getUserDetails().success(function(data, status) {
        console.log(data);
        usSpinnerService.stop('spinner-1');
        $scope.createQ = false;
        $scope.MqUser = data;
        console.log("Success in getting the user list");
        console.log($scope.MqUser);
        //I want the anchor tag to get disabled here using angular directive.
    }).error(function(data,status){
        //I want the anchor tag to get enabled here using angular directive.
        $scope.createQ = true;
        console.log(data);
        if(status == 0){
            $scope.networkError();
        }
        else{
            $scope.fetchuserFail(data.message);
        }
        usSpinnerService.stop('spinner-1');
        console.log("Failed to load the user list "+status);
    })
}
$scope.getMqUser();

Answer 1

纯粹的AngularJS解决方案

在success回调

中

.success(function(data){

    $scope.disableAnchor = true;

})

在error回调

中

.error(function(data){

    $scope.disableAnchor = false;

})

您的锚标记

<a ng-click='clickAnchor($event)' href="#your_href"> <a/>

然后在您的控制器中

$scope.clickAnchor = function($event){

   if ($scope.disableAnchor)
         $event.preventDefault()

}

非纯粹的AngularJS解决方案

在success回调

中

.success(function(data){

   $("#your_anchor").on('click',function(e){
      e.preventDefault();
      return false
    })

})

在error回调

中

.error(function(data){

   $("#your_anchor").on('click',function(e){
    })

})

我建议使用 Pure Angularjs解决方案。

Answer 2

您可以使用jQuery

取消绑定成功回拨中的点击处理程序

 .success(function(data){

 $("#register_pointer").unbind( "click" ) // unbind the click
 $("#register_pointer").css( 'pointer-events', 'none' ); //this will also prevent all the events like hover,mouse over etc.
});

您可以随时将其取回，如下所示

 $("#register_pointer").bind( "click" );
 $("#register_pointer").css( 'pointer-events', '');

Answer 3

您可以使用data-href启用和禁用锚标记。请查看给定的代码，希望它能帮到你。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <input type=checkbox onclick="enableEdit(this)"/>
        <div onclick="enable()">Enable</div>
        <div onclick="disable()">Disable</div>

        <a id="anc" data-href="call.html" href="#">click here</a>

        <script type="text/javascript">
            function enable() {
                $('#anc').attr("href", $('#anc').data("href"));
            }

            function disable() {
                $('#anc').attr("href", "#");
            }
        </script>

Answer 4

我的拙见（不同于规范 - 请参阅discussion）是 ng-disabled 指令是为了这个目的而创建的。由于disabled属性对锚元素没有影响，我的工作就是修复它：

a[disabled] {
  pointer-events:none;
}

Example here

请注意，虽然IE＆lt; 11不支持指针事件，但它仍然有效，因为IE也错误地确认了锚点上的禁用属性。其他浏览器支持为pretty good。

如何在http调用成功时禁用锚标记

4 个答案: