1

在我的 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"通过我的控制器添加到该锚元素。我该怎么做？

4

3 回答 3

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; 
}
于 2015-08-20T11:46:15.837 回答
1

我有一个受 Bootstrap3 启发的建议。如果你看一下代码，你会看到一些用于呈现和操作按钮的类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如有必要，将其绑定。

希望能帮助到你。

于 2015-08-20T12:13:13.477 回答
0

表单控件上有一个 disabled 属性，但锚标签没有。因此，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;
}
于 2015-08-20T12:03:13.787 回答