根据条件禁用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>

Answer 2

这个问题有一个纯CSS解决方案.

只需将标签上的指针事件设置为无:

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

当然,您应该设置一个更准确的CSS选择器来定位您想要的按钮.

Answer 3

我接受了@ m59提供的指令(没有引入一个孤立的范围):

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

Answer 4

我发现在模板中有条件地执行此操作的最简单方法

当您的条件满足时,我将其指向当前状态,该状态不会激活转换,否则我将转换到所需的状态.

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