在 Angularjs 应用程序中，将 ngdisabled=true 动态添加到控制器中的元素

Question

在我的 AngularJs 应用程序中，我的 html 如下所示：

<div id="myDIV">
  <div class = "myClass">
     <a class="first my-ctrl" ng-click="update()"> </a>
 </div>
</div>

现在，我需要将ng-disabled="true" 添加到控制器中某些型号手表的上述锚标记中，例如。

$scope.$watch('myVal', function (){
  // Add ng-diabled to above anchor i.e., (<a class="first my-ctrl" ng-click="update()"> </a>)
});

其中棘手的部分是，我无法直接访问上述 html。我正在使用另一个指令，该指令里面有上面的 html。所以在我的控制器中，我需要使用查询选择器访问锚元素，然后通过我的控制器将ng-disabled="true" 添加到该锚元素。我该怎么做？

Answer 1

我有一个受 Bootstrap3 启发的建议。如果您查看the code，您会看到一些用于呈现和操作带有btn 和disabled 类的按钮的类：

.btn.disabled,
.btn:disabled,
fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: .65;
}

但也可以将btn 和disabled 类应用于锚元素：

a.btn.disaabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

一个锚呈现为

<a class="btn btn-default disabled">I am a button</a>

根据 Safari 提供的这些计算的 CSS 属性：

-webkit-user-select: none;
background-color: rgb(92, 184, 92);
border-bottom-color: rgb(92, 184, 92);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(92, 184, 92);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(92, 184, 92);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(92, 184, 92);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: not-allowed;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: normal;
height: 38px;
line-height: 24px;
opacity: 0.6499999761581421;
padding-bottom: 6px;
padding-left: 16px;
padding-right: 16px;
padding-top: 6px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
width: 111.671875px;

你真正需要的是

• -webkit-user-select,
• cursor，这是最相关的，并且
• opacity，只是为了让它看起来像被禁用。

应用它们，您可以确定您的锚元素的行为完全就像一个按钮。因此，这可能是您的问题的解决方案。

那么，你接下来要做什么？

1. 使用ng-class。必要时添加/删除类disabled。
2. 添加一些 CSS 以使您的锚元素表现得像一个按钮。
3. 如有必要，将其绑定到ng-click。

希望对你有帮助。

Answer 2

[已编辑] 你可以在这里做的，因为它是一个锚，它不能禁用 ng（谢谢@skubski）是用 ng-class 在 css 中做的。

类似：

<a class="first my-ctrl" ng-click="update() ng-class="{'disabled' : yourCondition}"> </a>

a.disabled { 
    color: #AAAAAA; 
    cursor: default; 
    pointer-events: none; 
    text-decoration: none; 
}

Answer 3

表单控件上有一个 disabled 属性，但 anchor 标签没有。因此，ng-disabled 没有任何东西可以真正固定在自己身上。如果你坚持使用 ng-disabled 指令，你可以使用一个按钮并重新设置它的样式。或者您需要重新考虑如何“禁用”锚，这在另一个答案中进行了描述。

您可以自行测试并根据您的需要/要求采取行动。这个小例子说明了这一点。 (Plunker)

HTML

  <div class="well" ng-controller="TestController">
    <h4>Type x to toggle ng-disabled: <input type="text" ng-model="test"></h4>
    <a class="btn btn-primary" 
       ng-disabled="test == 'x'" 
       ng-click="handleAnchorClick()">ANCHOR</a>
    <button class="btn btn-primary" 
            ng-disabled="test == 'x'" 
            ng-click="handleButtonClick()">BUTTON</button>
    <hr/>
    <p>Anchor Clicks: {{anchorClicks}}</p>
    <p>Button Clicks: {{buttonClicks}}</p>
  </div>

控制器

function TestController($scope) {
    $scope.test = '';
    $scope.anchorClicks = 0;
    $scope.buttonClicks = 0;
    $scope.handleAnchorClick = function() {
        $scope.anchorClicks++;
    };
    $scope.handleButtonClick = function() {
        $scope.buttonClicks++;
    };

}

CSS

button {
        /*Reset's every elements apperance*/
        background: none repeat scroll 0 0 transparent;
        border: medium none;
        border-spacing: 0;
        color: #26589F;
        font-family: 'PT Sans Narrow',sans-serif;
        font-size: 16px;
        font-weight: normal;
        line-height: 1.42rem;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        text-align: left;
        text-decoration: none;
        text-indent: 0;
}