For the most part, AngularJS works neatly with HTML, seamlessly building on the standard elements and attributes. There are, however, quirks in HTML in the way that some attributes work that cause AngularJS some problems and require the use of directives. I describe the two categories of attributes that cause AngularJS problems in the sections that follow.
1. Managing Boolean Attributes
The significance of most HTML attributes is driven by the value assigned to the attribute, but some HTML attributes have an effect by their presence on an element, irrespective of their value. These are known as Boolean attributes.
A good example is the disabled attribute; a button element, for instance, is disabled when the disabled attribute is applied, even when the attribute has no value, like this:
…
<button class=”btn” disabled>My Button</button>
…
The only values that can be set for the disabled attribute are the empty string, like this:
…
<button class=”btn” disabled=””>My Button</button>
…
or disabled, like this:
…
<button class=”btn” disabled=”disabled”>My Button</button>
…
What you can’t do is set the disabled attribute to false in order to enable a button. This kind of attribute runs counter to the data binding approach that AngularJS uses. To solve this problem, AngularJS contains a number of directives that can be used to manage Boolean attributes, as described in Table 11-4.
I am not going to demonstrate all of these directives because they work in the same way, but in Listing 11-10, I have applied the ng-disabled directive.
Listing 11-10. Managing Boolean Attributes in the directives.html File
<!DOCTYPE html>
<html ng-app=”exampleApp”>
<head>
<title>Directives</title>
<script src=”angular.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script>
angular.module(“exampleApp”, [])
.controller(“defaultCtrl”, function ($scope) {
$scope.dataValue = false;
});
</script>
</head>
<body>
<div id=”todoPanel” class=”panel” ng-controller=”defaultCtrl”>
<h3 class=”panel-header”>To Do List</h3>
<div class=”checkbox well”>
<label>
<input type=”checkbox” ng-model=”dataValue”>
Set the Data Value
</label>
</div>
<button class=”btn btn-success” ng-disabled=”dataValue”>My Button</button>
</div>
</body>
</html>
I defined a model property called dataValue that I will use to control the state of a button element. The example contains a check box that uses the ng-model directive to create a two-way data binding with the dataValue property (as described in Chapter 10), and I have applied the ng-disabled directive to the button element as follows:
…
<button class=”btn btn-success” ng-disabled=”dataValue”>My Button</button>
…
Notice that I don’t set the disabled attribute directly. This is the responsibility of the ng-disabled directive based on the value of the expression it is given, which in this case is just the value of the dataValue property. When the dataValue property is true, the ng-disabled directive will add the disabled attribute to the element in the DOM, like this:
…
<button class=”btn btn-success” ng-disabled=”dataValue” disabled=”disabled”>
My Button
</button>
…
The disabled directive is removed when the data property is false. You can see the effect of checking and unchecking the box in Figure 11-9.
2. Managing Other Attributes
There are three directives that are used to work with other attributes that AngularJS can’t operate on directly, as described in Table 11-5.
These directives allow AngularJS data bindings to be used to set the value of the attribute they correspond to and, in the case of the ng-href directive, prevent the user from being able to navigate to the wrong destination by clicking the link before AngularJS has processed the element.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.