你能告诉我一种禁用提交按钮的方法吗，该按钮通过以下方式更改为新状态：
<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;
};
【问题讨论】：
标签： angularjs
我发现在模板中有条件地执行此操作的最简单方法
当你的条件得到满足时，我将它指向当前状态，它不会激活转换，否则我会转换到所需的状态。
<a ui-sref="{{ 1==1 ? '.': 'state({param:here})'}}">Disabled Link</a>
您可以简单地将它与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>【讨论】：
这个问题有一个纯 CSS 解决方案。
只需将 a 标签上的指针事件设置为无：
button[disabled] > a {
pointer-events: none;
}
当然，您应该设置一个更准确的 CSS 选择器以仅针对您想要的按钮。
【讨论】：
我在隔离范围和在锚中使用其他指令时遇到问题，所以这是我的看法，用常规属性替换隔离范围。
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>
【讨论】：
ui-router v1.0.18 在锚标签上引入了对ng-disabled 的支持。
【讨论】：
我对@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);
}
);
}
};
})
【讨论】：
<a ui-sref-if="!form.$invalid" ui-sref-val="home">{{link.name}}</a>.
在 ui-sref 中，您可以尝试根据代码隐藏 url，例如我有这段代码，它可以在 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>
在我的控制器中
$scope.canEdit = function(category){
return category == AuthUser.username ;
}
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>
【讨论】：