Remember to use ng-href instead of href
If you want to use AngularJS markup inside your links, you have to use ng-href instead of href. The reason is that it takes time for AngularJS to parse all HTML, and this means that if the user is quick he/she can click the link before it is actually parsed. This would result in a 404-page.
So, instead of writing this:
|
1
|
<
a
href
=
"<a href="https://www.someurl.com/">https://www.someurl.com/</a>{{hash}}"
/>
|
you should write this:
|
1
|
<
a
ng-href
=
"<a href="https://www.someurl.com/">https://www.someurl.com/</a>{{hash}}"
/>
|
Remember to use ng-src instead of src
This is similar to using ng-href instead of href. Whenever you insert images and want to use Angular-markup, you have to use ng-src. Just like this:
|
1
2
3
|
<
ul
id
=
"preview"
ng-repeat
=
"image in images"
>
<
li
><
img
ng-src
=
"{{image}}"
/></
li
>
</
ul
>
|
Does a form contain new data?
I needed to implement a functionality that would warn the user about changed data in a form when the user tried to navigate away from the form. Luckily, in AngularJS this is very easy. You just use the $dirty variable. Just like so:
|
1
2
3
4
5
6
7
8
9
10
|
$scope.back =
function
($event, ConfirmBackText) {
$event.preventDefault();
if
($scope.mainform.$dirty) {
if
(confirm(ConfirmBackText)) {
window.history.back();
}
}
else
{
window.history.back();
}
};
|
Notice, that I check whether or not $scope.mainform.$dirty is true or false. If it is true, I pop the confirm dialogue.
Watching two variables are once
AngularJS allows you to watch a variable and will call a callback whenever its content is modified. But what if you need to watch two variables at once? You can write this:
|
1 2 3 4 5 6 7 8 |
[crayon-5fc704db11e6c748671956 inline="true" ]function callback() { ... } $scope.$watch('a', callback); $scope.$watch('b', callback); |
[/crayon]
But you can also write this, which is more elegant:
|
1 2 3 |
[crayon-5fc704db11e6f915575598 inline="true" ]$scope.$watch('a + b', callback); |
[/crayon]
The value of “a + b” will change whenever either a or b changes. Therefore you watch both variable at once.
Syntax of directives
The tutorial of AngularJS writes directives like this: “ng-model”. But you can also write: “x-ng-model”, “ng:model”, “ng_model”, “data-ng-model”. They are all equivalent and work the same. I like to use the syntax with “data-” because it is standard-compliant.
Nuances of ngDisabled
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/** * Easy access to route params * REMEMBER: this object is empty until the $routeChangeSuccess event is broadcasted */$rootScope.params = $routeParams; /** * Wrapper for angular.isArray, isObject, etc checks for use in the view * * @param type {string} the name of the check (casing sensitive) * @param value {string} value to check */$rootScope.is = function(type, value) { return angular['is'+type](value); }; /** * Wrapper for $.isEmptyObject() * * @param value {mixed} Value to be tested * @return boolean */$rootScope.empty = function(value) { return $.isEmptyObject(value); }; /** * Debugging Tools * * Allows you to execute debug functions from the view */$rootScope.log = function(variable) { console.log(variable); }; $rootScope.alert = function(text) { alert(text); }; |
$watch and $apply
Angular’s two-way data binding is the root of all awesome in Angular. However, it’s not magic, and there are some situations where you need to give it a nudge in the right direction.
When you bind a value to an element in Angular using ng-model, ng-repeat, etc., Angular creates a $watch on that value. Then whenever a value on a scope changes, all $watches observing that element are executed, and everything updates.
Sometimes, usually when you’re writing a custom directive, you will have to define your own $watch on a scope value to make the directive react to changes.
On the flip side, sometimes you change a scope value in some code but the app doesn’t react to it. Angular checks for scope variable changes after pieces of your code have finished running; for example, when ng-click calls a function on your scope, Angular will check for changes and react. However, some code is outside of Angular and you’ll have to call scope.$apply() yourself to trigger the update. This is most commonly seen in event handlers in custom directives.
// If you don’t do this, you URLs will be base.com/#/home rather than base.com/home
$locationProvider.html5Mode(true);
One thought on “5 Quick Angular JS Tips and Tricks”