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。所以在我的控制器中，我需要使用查询选择器访问anchor元素，然后通过我的控制器将ng-disabled="true"添加到该锚元素。我该怎么办？

Answer 1

将帖子你可以在这里做什么，因为它是一个锚，它不能用于禁用ng（谢谢@skubski）是用c-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

我有一个受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，只是为了让它看起来像残疾人。

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

那么，你下一步做什么？

雇用ng-class。必要时添加/删除课程disabled。
添加一些CSS以使您的锚元素表现得像它的按钮。
如有必要，请将其绑定到ng-click。

希望它有所帮助。

Answer 3

表单控件具有已禁用的属性，但anchor标记没有。因此，ng-disabled没有任何实际可靠的东西。如果您坚持使用ng-disabled指令，则可以使用按钮并重新设置它。或者您需要重新考虑如何禁用＆＃39;锚点，在另一个答案中描述。

您可以自己测试并根据您的需求/要求行事。这个小例子说明了这一点。（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;
}

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

3 个答案: