根据条件禁用ui-sref

Question

您能告诉我一种禁用提交按钮的方法吗，该按钮通过以下方式变为新状态：

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

仅当表单有效时，才应启用该按钮。

ng-disabled与ui-sref不起作用：

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

app.js中的canSave函数为：

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

Answer 1

您可以简单地将其与之配对，ng-click这样便ng-disabled可以使用。

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

这是使用自定义指令的更理想的方式：

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>