Angularjs 根据条件禁用ui sref

您能告诉我一种禁用“提交”按钮的方法吗？该按钮会通过以下方式更改为新状态：

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

app.js中的canSave函数为：

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

---

您可以简单地将其与

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

测试

我对@m59提供的指令的看法（没有引入单独的作用域）：

---

对于这个问题，有一个纯粹的CSS解决方案

只需将a标记上的指针事件设置为“无”：

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

---

当然，您应该设置一个更精确的CSS选择器，以只针对您想要的按钮。

在ui sref中，您可以尝试根据密码隐藏url，例如，我有这段代码，它可以在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>

Authuser是我主页中的一个工厂

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

//配置当前用户
var app=angular.module（'myApp'）；//不包括从属模块的列表（第二个参数为'module`），请“重新打开”该模块以
app.factory（'AuthUser'，function（）{
返回{
用户名：“{user.username}默认值：''escapejs}”
}
});

我在隔离作用域和在锚点内使用其他指令方面遇到了问题，因此我的观点是，用常规属性替换iscolate作用域

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看起来像这样

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

---

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

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

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

禁用链接

ui路由器v1.0.18

引入了对锚定标签上的

ng disabled

的支持。

感谢您的回答。解决了这个问题，但是你知道为什么我们不能像那样使用ui sref吗？这与ui sref没有任何关系。只是禁用了HTML不会影响href属性。您可以添加一些具有禁用属性的CSS目标定位锚，并设置指针事件：无。这应该是核心功能。如果您需要在链接中评估某些内容，这非常有用。示例：

{{link.name}

。这是最干净的方法！不需要额外的javascript。实际上应该是答案。不太有效-仍然可以使用键盘空格键“单击”锚，只是尝试一下您的建议…您的代码中是否缺少结束括号？：）事实上-纠正了闭包：-）当您希望基于参数动态执行此操作时，存在一个问题。例如，如果您使用ui sref=“{showState？”：“state（{param:here}）”并随后更改showState变量，则链接仍将转到初始状态集。@trainoasis然后使用

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

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

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

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