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

Question

In my AngularJs application I have my html as shown below:

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

Now, I need to add ng-disabled="true" to the above anchor tag on some model watch in my controller, some thing like.

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

the tricky part of it is, I don't have direct access to the above html. I am using another directive and that directive has the above html inside it. So in my controller, I need to access the anchor element using query selector and then add ng-disabled="true" to that anchor element through my controller. How can I do it?

Answer 1

I have a suggestion inspired by Bootstrap3. If you take a look into the code, you'll see some classes that are used to present and manipulate buttons with btn and disabled classes:

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

but also it's possible to apply btn and disabled classes to an anchor element:

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

An anchor presented as

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

has these computed CSS properties, according to what Safari provides:

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

The ones you actually need are

• -webkit-user-select,
• cursor, which is most relevant, and
• opacity, just to make it look like disabled.

Applying them, you can be sure your anchor element will behave exactly like a button. Therefore, this may be a solution to your problem.

So, what you do next?

1. Employ ng-class. Add/remove class disabled when necessary.
2. Add some CSS to make your anchor element behave like it's a button.
3. Bind it to ng-click if necessary.

Hope it helps.