Как отключить метки привязки при успешном завершении HTTP-звонков

Может ли кто-нибудь помочь мне в том, как отключить тэг привязки при успешном запуске 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();

Ответ 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.

Ответ 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', '');

Ответ 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>

Ответ 4

Мое скромное мнение (которое не согласуется со спецификацией ) заключается в том, что для этой цели была создана директива ng-disabled, Поскольку атрибут disabled не влияет на элементы привязки, мне нужна его задача:

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

Пример здесь

Обратите внимание, что, хотя события-указатели не поддерживаются в IE и 11, он по-прежнему работает, потому что IE также неправильно подтверждает отключенный атрибут на якорях. Другая поддержка браузера довольно хорошая.