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

【问题标题】：How to disable anchor tags on http call success如何在 http 调用成功时禁用锚标记
【发布时间】：2015-05-18 04:29:16
【问题描述】：

谁能帮我解决如何在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();

【问题讨论】：

标签： javascript angularjs anchor

【解决方案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 解决方案。

【讨论】：

虽然这可行，但它不是一个纯粹的 AngularJS 解决方案。你知道不使用 JQuery 的吗？
不错！感谢更新。老实说赢得了赞成票:)
$scope.disableAnchor = true 它不适用于锚标签它只适用于按钮
@sanmoypaul 我没有对锚元素应用禁用标签，它只是一个范围变量，阅读代码。
@sanmoypaul 只是一个变量名，你可以改，我没有使用ng-disabled标签。

【解决方案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', '');

【讨论】：

不错的解决方案。但是，IE 不支持指针事件
@VinayK 是的 IE 不支持指针事件

【解决方案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>

【讨论】：

是的，使用 jQuery 我已经完成了....但是我需要使用 angular 指令来执行此操作。在 Ajax 成功调用时，锚标记将被禁用，错误时应该启用
你能给我提供你工作代码的示例代码吗？

【解决方案4】：

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

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

Example here

请注意，虽然 IEpretty good。

【讨论】：