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

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

[已编辑] 你可以在这里做什么，因为它是一个锚点，它不能使用 ng-disabled（谢谢你@skubski）在 css 中用 ng-class.

来做

类似于：

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

表单控件有一个禁用的属性，但 anchor tags do not. Therefore, ng-disabled 没有任何东西可以实际固定。如果你坚持使用 ng-disabled 指令，你可以使用一个按钮并重新设置它的样式。或者您需要重新考虑如何 'disable' 其他答案中描述的锚点。

你可以自己测试一下，然后根据你的needs/requirements来操作。这个小例子说明了这一点。 (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;
}

Answer 3

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

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

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

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，只是让它看起来像禁用了。

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

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

雇用 ng-class。 Add/remove class disabled 必要时。
添加一些 CSS 以使您的定位元素表现得像一个按钮。
如有必要，将其绑定到 ng-click。

希望对您有所帮助。

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

In Angularjs application add ngdisabled=true dnamically to an element in the controller

jquery

angularjs

angularjs-directive

jqlite