使用AngularJS启用/禁用锚标签
如何使用指令方法启用/禁用锚点标记？
例：
- 同时点击编辑链接，创build和删除需要被禁用或变灰
- 同时点击创build链接，编辑和删除需要被禁用或变灰
JAVASCRIPT：
angular.module('ngApp', []).controller('ngCtrl',['$scope', function($scope){ $scope.create = function(){ console.log("inside create"); }; $scope.edit = function(){ console.log("inside edit"); }; $scope.delete = function(){ console.log("inside delete"); }; }]).directive('a', function() { return { restrict: 'E', link: function(scope, elem, attrs) { if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){ elem.on('click', function(e){ e.preventDefault(); if(attrs.ngClick){ scope.$eval(attrs.ngClick); } }); } } }; }); 链接到代码
更新：禁用HREF在链接函数返回中效果更好。 下面的代码已经更新。
在ngClick之前， aDisabled自然会执行，因为指令按字母顺序sorting。 当aDisabled重命名为tagDisabled ，该指令不起作用。
要“禁用”“a”标签，我想要以下的东西：
- 单击时不要遵循
href链接 - 点击时
ngClick事件不会触发 - 样式通过添加
disabled类更改
这个指令通过模仿ngDisabled指令来实现。 基于a-disabled指令的值，所有上述function都被切换。
myApp.directive('aDisabled', function() { return { compile: function(tElement, tAttrs, transclude) { //Disable ngClick tAttrs["ngClick"] = "!("+tAttrs["aDisabled"]+") && ("+tAttrs["ngClick"]+")"; //return a link function return function (scope, iElement, iAttrs) { //Toggle "disabled" to class when aDisabled becomes true scope.$watch(iAttrs["aDisabled"], function(newValue) { if (newValue !== undefined) { iElement.toggleClass("disabled", newValue); } }); //Disable href on click iElement.on("click", function(e) { if (scope.$eval(iAttrs["aDisabled"])) { e.preventDefault(); } }); }; } }; });
这是一个可能表示禁用标签的css风格：
a.disabled { color: #AAAAAA; cursor: default; pointer-events: none; text-decoration: none; }
这里是代码的行动，与你的例子
我的问题稍有不同：我有定义href定位标记，我想使用ng-disabled来防止点击时链接到任何地方。 解决方法是在禁用链接时取消设置href ，如下所示：
<a ng-href="{{isDisabled ? '' : '#/foo'}}" ng-disabled="isDisabled">Foo</a>
在这种情况下， ng-disabled仅用于样式元素。
如果你想避免使用非官方的属性 ，你需要自己devise风格：
<style> a.disabled { color: #888; } </style> <a ng-href="{{isDisabled ? '' : '#/foo'}}" ng-class="{disabled: isDisabled}">Foo</a>
对于不需要复杂答案的人，我用Ng-If来解决这个问题：
<div style="text-align: center;"> <a ng-if="ctrl.something != null" href="#" ng-click="ctrl.anchorClicked();">I'm An Anchor</a> <span ng-if="ctrl.something == null">I'm just text</span> </div>
修改@ Nitin的答案与dynamic禁用一起工作：
angular.module('myApp').directive('a', function() { return { restrict: 'E', link: function(scope, elem, attrs) { elem.on('click', function(e) { if (attrs.disabled) { e.preventDefault(); // prevent link click } }); } }; });
这将检查每次单击时是否存在禁用的属性及其值。
免责声明：
OP就另一个答案做了这个评论：
我们可以有ngDisabledbutton或input标签; 通过使用CSS我们可以使button看起来像锚标签，但没有多大的帮助！ 我更热衷于如何使用指令方法或angular度来做这件事？
你可以在你的控制器的范围内使用一个variables，根据你点击的最后一个button/链接，使用ng-click将variables设置为正确的值，禁用链接/button，禁用按需要时根据variables的值。
我已经更新了你的Plunker给你一个想法。
但基本上，这是这样的：
<div> <button ng-click="create()" ng-disabled="state === 'edit'">CREATE</button><br/> <button ng-click="edit()" ng-disabled="state === 'create'">EDIT</button><br/> <button href="" ng-click="delete()" ng-disabled="state === 'create' || state === 'edit'">DELETE</button> </div>
你有没有尝试过懒惰评估expression式disabled || someAction() disabled || someAction() ？
让我们假设我在我的控制器中定义了类似的东西：
$scope.disabled = true;
然后，我可以禁用链接并应用内联样式，如下所示：
<a data-ng-click="disabled || (GoTo('#/employer/'))" data-ng-style="disabled && { 'background-color': 'rgba(99, 99, 99, 0.5)', }">Higher Level</a>
或者更好的是禁用一个链接并像这样应用一个类：
<a data-ng-click="disabled || (GoTo('#/employer/'))" data-ng-class="{ disabled: disabled }">Higher Level</a>
注意：你将有一个class="disabled"被该语句应用于DOM元素。
在这个阶段，您只需要处理GoTo()将要执行的操作。 就我而言，就像redirect到关联状态一样简单：
$scope.GoTo = function (state) { if (state != undefined && state.length > 0) { $window.location.hash = state; } };
不受ngDisabled限制，你受限于你决定做的事情。
使用这种技术，我成功地应用了权限级别检查，以启用或禁用用户访问我的模块的某些部分。
简单的蹲点来certificate这一点
你可以创build一个与ng-disabled类似的自定义指令，并通过以下方式禁用一组特定的元素：
- 观看自定义指令的属性更改，例如
my-disabled。 - 在没有添加事件处理程序的情况下克隆当前元素。
- 将css属性添加到克隆的元素以及将提供元素的禁用状态的其他属性或事件处理程序。
- 在监视的属性上检测到更改时，用克隆的元素replace当前元素。
HTML
<a my-disabled="disableCreate" href="#" ng-click="disableEdit = true">CREATE</a><br/> <a my-disabled="disableEdit" href="#" ng-click="disableCreate = true">EDIT</a><br/> <a my-disabled="disableCreate || disableEdit" href="#">DELETE</a><br/> <a href="#" ng-click="disableEdit = false; disableCreate = false;">RESET</a>
JAVASCRIPT
directive('myDisabled', function() { return { link: function(scope, elem, attr) { var color = elem.css('color'), textDecoration = elem.css('text-decoration'), cursor = elem.css('cursor'), // double negation for non-boolean attributes eg undefined currentValue = !!scope.$eval(attr.myDisabled), current = elem[0], next = elem[0].cloneNode(true); var nextElem = angular.element(next); nextElem.on('click', function(e) { e.preventDefault(); e.stopPropagation(); }); nextElem.css('color', 'gray'); nextElem.css('text-decoration', 'line-through'); nextElem.css('cursor', 'not-allowed'); nextElem.attr('tabindex', -1); scope.$watch(attr.myDisabled, function(value) { // double negation for non-boolean attributes eg undefined value = !!value; if(currentValue != value) { currentValue = value; current.parentNode.replaceChild(next, current); var temp = current; current = next; next = temp; } }) } } });
在相应的范围内做一个切换function来灰化链接 。
首先，在.css文件中创build以下CSS类。
.disabled { pointer-events: none; cursor: default; } .enabled { pointer-events: visible; cursor: auto; }
添加一个$ scope.state和$ scope.togglevariables。 在JS文件中编辑您的控制器，如下所示：
$scope.state='on'; $scope.toggle='enabled'; $scope.changeState = function () { $scope.state = $scope.state === 'on' ? 'off' : 'on'; $scope.toggleEdit(); }; $scope.toggleEdit = function () { if ($scope.state === 'on') $scope.toggle = 'enabled'; else $scope.toggle = 'disabled'; };
现在，在HTML中，一个标签可以编辑为：
<a href="#" ng-click="create()" class="{{toggle}}">CREATE</a><br/> <a href="#" ng-click="edit()" class="{{toggle}}">EDIT</a><br/> <a href="#" ng-click="delete()" class="{{toggle}}">DELETE</a>
为了避免链接自身被禁用的问题，请在函数结尾处更改DOM CSS类。
document.getElementById("create").className = "enabled";
您可以使用angular指令重新定义a标签：
angular.module('myApp').directive('a', function() { return { restrict: 'E', link: function(scope, elem, attrs) { if ('disabled' in attrs) { elem.on('click', function(e) { e.preventDefault(); // prevent link click }); } } }; });
在html中：
<a href="nextPage" disabled>Next</a>
我希望锚标签导致带有一个URL的静态页面。 我认为一个button更适合你的用例，然后你可以使用ngDisabled来禁用它。 从文档： https ： //docs.angularjs.org/api/ng/directive/ngDisabled
