2015-03-10 6 views
22

Können Sie mir einen Weg, sagen die Submit-Button, der durch in einen neuen Zustand wechselt zu deaktivieren:Disable ui-sref basierend auf einem Zustand

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

Die Taste sollte nur aktiviert werden, wenn das Formular gültig ist.

ng-disabled mit ui-sref funktioniert nicht:

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

canSave Funktion innerhalb app.js sein:

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

Antwort

19

Sie einfach mit ng-click paaren könnte, so dass ng-disabled arbeiten.

.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> 

Hier ist eine andere Art eine eigene Direktive:

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); 
 
     }); 
 
    } 
 
    }; 
 
}) 
 
;
<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>

+0

Danke für die Antwort. Das Problem gelöst, aber weißt du, warum wir ui-sref nicht so benutzen können? – Aakash

+2

Das hat nichts mit UI-Sref zu tun. Es ist nur HTML - deaktiviert wirkt sich nicht auf das href-Attribut aus. Sie könnten einige CSS-Targeting-Anker mit dem deaktivierten Attribut hinzufügen und Zeiger-Ereignisse festlegen: none. – m59

+0

Dies sollte Kernfunktionalität sein – Loupax

7

Mein Nehmen auf dem durch @ M59 vorgesehen Richtlinie (ohne einen isolierten Rahmen der Einführung):

.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); 
       } 
      ); 
     } 
    }; 
}) 
+0

Dies ist nützlich, wenn Sie Eval etwas innerhalb der Verbindung benötigen. Beispiel: '{{link.name}}'. –

15

Es gibt eine reine CSS-Lösung für das Problem.

setzen Sie einfach die Zeiger-Ereignisse auf einen Tag none:

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

Natürlich können Sie einen genaueren CSS-Selektor setzen sollten nur die Tasten, die Sie wollen Ziel.

+0

Das ist der sauberste Weg! Kein zusätzliches Javascript erforderlich. Sollte eigentlich die Antwort sein. – Vik

+3

Funktioniert nicht ganz - der Anker kann immer noch mit der Tastatur-Leertaste "angeklickt" werden – Kev

0

in ui-sref können Sie url versuchen und verstecken basierend auf codition zum Beispiel ich diesen Code haben und es funktioniert in Urls

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

und in meinem Controller

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

authuser ist eine Fabrik auf meiner Hauptseite

<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> 
0

Ich hatte Probleme mit dem isolieren Bereich und mit anderen Direktiven im Anker s, also hier ist meine Annahme und ersetzt den Iscolate-Bereich durch reguläre Attribute.

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 Sieht so aus.

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

Der einfachste Weg, dass ich es bedingt in der Vorlage

Wenn Ihre Bedingung erfüllt ist zu tun gefunden, ich es auf den aktuellen Stand zeigen, die nicht den Übergang sonst Übergang I in den Zustand nicht aktiviert erforderlich.

<a ui-sref="{{ 1==1 ? '.': 'state({param:here})'}}">Disabled Link</a> 
+1

Probieren Sie einfach Ihren Vorschlag ... gibt es keine fehlende schließende Klammer in Ihrem Code? :) – Setily

+1

in der Tat - die Schließung behoben :-) –

+0

Es gibt ein Problem damit, wenn Sie es dynamisch basierend auf einem Parameter tun möchten. Wenn Sie beispielsweise ui-sref = "{{showState? '.': 'State ({param: here})'}} verwenden und anschließend die Variable showState ändern, wird die Verknüpfung weiterhin auf den ursprünglichen Zustand gesetzt. – trainoasis

Verwandte Themen