Désactiver l'interface utilisateur-sref en fonction d'une condition

Pouvez-vous m'indiquer un moyen pour désactiver le bouton "soumettre", qui change d'état en:

<a ui-sref="state">Submit</a>

Le bouton doit être activé que lorsque le formulaire est valide.

ng-disabled avec ui-sref ne fonctionne pas:

<form name="tickets">
  <button ng-disabled="!canSave()"><a ui-sref="view">Submit</a></button>
</form>

canSave fonction à l'intérieur d'app.js en cours:

$scope.canSave = function(){
  return $scope.tickets.$dirty && $scope.tickets.$valid;
};

InformationsquelleAutor Aakash | 2015-03-10

angularjs

Il vous suffit de le coupler avec ng-click de sorte que ng-disabled fonctionne.

.controller('myCtrl', function($scope, $state) {
    //so that you can call `$state.go()` from your ng-click
    $scope.go = $state.go.bind($state);
})

<!-- call `go()` and pass the state you want to go to -->
<button ng-disabled="!canSave()" ng-click="go('view')>Submit</button>

Ici est une façon élégante en utilisant une mesure de la directive:

JS:

angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
  $stateProvider.state('home', {
    url: '/'
  });
})
.controller('myCtrl', function() {
  
})
.directive('uiSrefIf', function($compile) {
  return {
    scope: {
      val: '@uiSrefVal',
      if: '=uiSrefIf'
    },
    link: function($scope, $element, $attrs) {
      $element.removeAttr('ui-sref-if');
      $compile($element)($scope);
      
      $scope.$watch('if', function(bool) {
        if (bool) {
          $element.attr('ui-sref', $scope.val);
        } else {
          $element.removeAttr('ui-sref');
          $element.removeAttr('href');
        }
        $compile($element)($scope);
      });
    }
  };
})
;

HTML:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="form">
    <input ng-model="foo" ng-required="true">
    <button ng-disabled="form.$invalid">
      <a ui-sref-if="!form.$invalid" ui-sref-val="home">test</a>
    </button>
  </form>
</div>

Merci pour la réponse . Résolu le problème ,Mais savez-vous pourquoi nous ne pouvons pas utiliser l'interface utilisateur-sref comme ça ?
Cela n'a rien à voir avec de l'interface utilisateur-sref. C'est juste HTML - désactivé n'affecte pas l'attribut href. Vous pouvez ajouter un peu de CSS ciblage des ancres avec les personnes handicapées de l'attribut et set pointer-events: none.
Ce devrait être à la fonctionnalité de base

InformationsquelleAutor m59

18

Il est un pur CSS solution pour le problème.

Il suffit de régler le pointeur événements sur votre tag à aucun:
```
button[disabled] > a {
    pointer-events: none;
}
```
Bien sûr, vous devez définir un plus précis sélecteur CSS pour cibler les boutons que vous souhaitez.
- C'est la façon la plus propre! Pas de supplément de javascript nécessaire. Devrait en fait être la réponse.
- Ne fonctionne pas - l'ancre peut toujours être "cliqué" à l'aide de la touche espace du clavier
InformationsquelleAutor Michael Günter

Mon point de vue sur la directive fournie par @m59 (sans l'introduction d'un isolé champ d'application):

.directive('uiSrefIf', function($compile) {
    return {
        link: function($scope, $element, $attrs) {

            var uiSrefVal = $attrs.uiSrefVal,
                uiSrefIf  = $attrs.uiSrefIf;

            $element.removeAttr('ui-sref-if');
            $element.removeAttr('ui-sref-val');



            $scope.$watch(
                function(){
                    return $scope.$eval(uiSrefIf);
                },
                function(bool) {
                    if (bool) {

                        $element.attr('ui-sref', uiSrefVal);
                    } else {

                        $element.removeAttr('ui-sref');
                        $element.removeAttr('href');
                    }
                    $compile($element)($scope);
                }
            );
        }
    };
})

Ceci est utile si vous avez besoin d'eval quelque chose à l'intérieur le lien. Exemple: <a ui-sref-if="!form.$invalid" ui-sref-val="home">{{link.name}}</a>.

InformationsquelleAutor klmdb

5

La façon la plus simple que j'ai trouvé pour le faire de façon conditionnelle dans le modèle

Lorsque votre condition est remplie, je point à l'état actuel qui n'a pas activer la transition chose, je l'transition de l'état de besoin.
```
<a ui-sref="{{ 1==1 ? '.': 'state({param:here})'}}">Disabled Link</a> 
```
- Juste essayer votre suggestion...n'est-ce pas là un manque de fermeture de parenthèse dans votre code? 🙂
- en effet Rectifiée à la fermeture 🙂
- Il y a un problème avec cela, quand vous voulez le faire de façon dynamique en fonction d'un param. Par exemple, si vous utilisez l'interface utilisateur-sref="{{ showState ? '.': 'état({param:ici})'}} et le changement showState variable par la suite, le lien va aller à l'état initial défini.
- Ensuite, utilisez <a ui-state="!showState? "etat": null," ui-state-params="{param:ici}">
InformationsquelleAutor jetpackdata.com

dans l'interface utilisateur-sref vous pouvez essayer de cacher url fondée sur la condition, par exemple j'ai ce code et il fonctionne dans les url

<a ui-sref="category-edit({pk:category.id})" ng-show="canEdit(category.owner)" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i></a>

et dans mon contrôleur

$scope.canEdit = function(category){
   return category == AuthUser.username ;
}

Authuser est une usine à ma page principale

<script>
    //Configure the current user
    var app = angular.module('myApp'); //Not including a list of dependent modules (2nd parameter to `module`) "re-opens" the module for 
    app.factory('AuthUser', function() {
      return {
       username: "{{ user.username|default:''|escapejs }}"
      }
   });
</script>

InformationsquelleAutor Dimitris Kougioumtzis

J'ai eu des problèmes avec l'isoler de la portée et de l'utilisation d'autres directives à l'intérieur des ancres, voici donc mon point de vue, le remplacement de la iscolate portée avec des attributs réguliers.

angular.module('app').directive('uiSrefIf', ['$compile', function($compile) {
  var directive = {
    restrict: 'A',
    link: linker
  };

  return directive;

  function linker(scope, elem, attrs) {
    elem.removeAttr('ui-sref-if');
    $compile(elem)(scope);

    scope.$watch(attrs.condition, function(bool) {
      if (bool) {
        elem.attr('ui-sref', attrs.value);
      } else {
        elem.removeAttr('ui-sref');
        elem.removeAttr('href');
      }

      $compile(elem)(scope);
    });
  }
}]);

Html Ressemble à ceci.

<a ui-sref-if condition="enableLink()" value="init.main">
    <cover class="card-image" card="card"></cover>
</a>

InformationsquelleAutor user3257696

0

ui-router v1.0.18 introduit la prise en charge ng-disabled sur les balises d'ancrage.

InformationsquelleAutor delta711

Vous devez vous connecter pour publier un commentaire.