Building Your Own Directives
We create a spy to handle the call-back and then the it function gets called when we
click on a new page.
To implement this we add an extra field to our isolate scope definition:
scope: {
...,
onSelectPage: '&'
},Now an onSelectPage() function will be available on the isolated scope. When
called, it will execute the expression passed to the on-select-page attribute.
We now change the selectPage() function on the isolated scope to call
onSelectPage():
scope.selectPage = function(page) {
if (! scope.isActive(page) ) {
scope.currentPage = page;
scope.onSelectPage({ page: page });
}
};Note that we pass the page variable to the expression in a map of
variables. These variables are provided to the bound expression
when it is executed, as though they were on the scope.Creating a custom validation directive
In our SCRUM application we have a User Edit Form. On that form we require users
to provide a password. Since the password field is obscured and the user cannot see
what they are typing, it is helpful to have a confirm password field.
We need to check that the password and confirm password field are identical. We
will create a custom validation directive that we can apply to an input element that
checks whether the model of the input element matches another model value. In use,
it will look like this:
<form name="passwordForm">
<input type="password" name="password" ng-model="user.password">
<input type="password" name="confirmPassword" ng-
model="confirmPassword" validate-equals="user.password">
</form>