Unbinding Angular JS $watch listeners

Removing Angular JS listeners

Unbinding Angular JS $watch listeners

One of the most common practices in Angular JS is to set up a listener that watches over an event or variable change.

This is a good way of detecting a change in a variable in order to trigger some action, for example, let’s say that you want to validate the value of an input in a form.

Let’s see an example. Consider a simple form where you ask for a password and you want to enable the submit button only when the password is at least 5 chars long.


So, in our controller we can have basic initialization:

Please note that since isPasswordOk is initialized as false, the ng-disabled condition will be true and therefore the button will be inactive.

What we want to do is to make sure that when the password has the required length, the button will be active and available.

One way of doing this is by setting up a watcher on the model. Let’s add some code to our controller:

The $watch function is called every time the variable “password” is changed, and since this is tied up to the input by the ng-model directive, every time the user changes the input, the isPasswordOk variable will be set according to the password.length condition.

Until now, everything should be familiar for most Angular JS developers, and here starts the interesting part. So what would you do if for some reason you would like to stop listening for changes on the password input once the submit button is enabled (this is just an example).

Good news is that Angular JS provides one way of doing this, because when you set up the watcher, Angular returns a callback function that you can call to kill the listener. So let’s do this in our sample code:

On this example, we are killing the watcher once the password is at least 5 chars long. This is just a silly example, you don’t probably want to stop watching over the password variable because the user may change it at any time but in any case, if you ever wanted to know how to remove the watcher, this is the way of doing it.


In this example we are using the $scope, so another good way of removing the watcher is just remove the function from the $scope.$$listener array. If this is the only watcher that we have, we can just remove it by doing something like this:

But be careful when doing this because if there are other watchers, this will remove all of them. As an alternative, you could just find and remove the watcher on the “password” variable. The $$listeners array is an associative array where the key of each element is the $watchExpression, so in this case, if you look at the $scope.$$listeners array, you should see something like this:

When we use the $scope, this is not that bad, but if we’re using $rootScope, it’s very dangerous to clean up the $rootScope.$$listeners array because we will be removing the listeners of the whole application.

In any case, the easiest, fastest and safest way of removing the listener is by calling the callback function returned by Angular JS.

I hope you will find this post interesting. I had to implement this last week on a project I’m working on. Have you ever needed to remove a watcher? What was the use case?

Recommended reading: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch


By | February 14th, 2016|angular, javascript|0 Comments

Quickly debug and test out PHP code in Symfony 2

Have you ever needed to quickly test out some code on Symfony? Have you ever wanted to test see the output of some code right there in the terminal?

If you answered Yes to that questions or if you just are curious or want to know how to do this, here’s a quick trick that most people don’t know.


By | August 12th, 2015|guides, how-to, php, symfony|0 Comments

JSConf Uruguay 2015 recap and thoughts

Last 24th and 25th April I had the chance to attend a new edition of the JSConf Uruguay (https://jsconf.uy), an anual JavaScript Conference held in Montevideo, Uruguay.

This time there were more than 30 speakers from Facebook, Opera, Paypal, MongoDB, Intel, Microsoft, Netflix and other companies from Europe, Latin and North America that provided 26 talks and 6 workshops, covering a lot of different topics related not only to web frontend development but also backend, mobile, pattern designs, architecture, automation, animation & 3D, performance, scaling and other stuff not even related to the web (for example: robots, drones and other funny stuff).


By | April 30th, 2015|general, javascript|0 Comments

Quick introduction to Markdown language

The Markdown language was created in 2004 with the goal of enabling people “to write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid HTML or XHTML.

Today, we can find Markdown language almost everywhere, and this is particularly true for developers. For example, if you use Github, you have probably seen Makdown language in action (look for any  README.md file in any repository).

So this is a quick introduction to the most common hash tags.

  1. Heading

To write an HTML Heading we use the # (hash mark), for example:







This is very easy to remember, if we want an <h2> tag, we use 2 ## :) Same criteria for the other heading tags.

  1. Code

One of my most used tags is the Code block. We use the (3 backtick characters) to start and end the block of code (remember to open and close the block). The resulting HTML code will be &lt;code&gt;&lt;/code&gt;
<pre class="lang:default decode:true ">

This is a code block


3. Links

We can use 2 different link types: inline and reference links.

To create an inline link, we use the following syntax:

Sample Text

If we want to use the reference link, we need to specify a label to identify the link, for example:

[Sample Text]1

  1. Lists

This is another powerful and most used function. We can create lists of any of the following types:

* asterisk
+ plus
– hyphen

These lists are unordered, but if we want to use an ordered one, we just indicate the order using numbers, like this:

1. first element
2. second element
3. third element

We can also nest lists, we just include different lists with some indentation (using white spaces), like this:

1. first level element
* second level element (here I used 4 white spaces)
– third level element (8 white spaces
* second level: 4 spaces again

To be continued…

By | March 20th, 2015|general, guides, how-to, reference|3 Comments

Easy fix to a common AngularJS Module Error

I have recently started to work on an Angular project and at some point I got:

It turned out that it was really easy fix, but it took me a while to figure this out.

Just to be on the same page, let me explain a little bit about the app and how I fixed this error with an easy fix.

In this case, “app.wizard” is the name of a module I started to work on. I am using Angular 1.3.12 and Gulp to automate some tasks. If you don’t use Gulp, you should (see http://gulpjs.com/).
This is the structure I decided to use for my app:

Let’s have a quick look at these 3 files:
app.module.js: the main module for my app

wizard.module.js: a module of app

wizard.js: the controller for the app.wizard module

And finally, in my Gulpfile I run a task to concat all the different files into a single one. For simplicity I’ll just copy that part of the gulpfile.js:

So, the idea is that I run

to create a file app.js in app/assets that contains all the Angular code needed for my app, but it turned out that even though the final app.js was fine, I still got that Uncaught Error: [$injector:modulerr] error.

Let’s have a look at the final app.js after running gulp:

If you have already seen the error, excellent! I am going to explain for those who hadn’t found it yet. It took me a while to understand what was going on. I asked for answers in google and other blogs but didn’t find the cause of the error. I tried a lot of different fixes and solutions proposed all around but nothing seemed to fix my error.

Let’s have a look at the whole error again:

Now if we read that error message it says that the module app.wizard is not available and therefore it cannot be instantiated.

But if we look at the app.js, we clearly see that the module is in fact instantiated (look at wizard.module.js):

Those empty [] indicates that the module is defined, so, what’s going on here?

Let’s have a look again at the app.js. We see the contents of these files:
1. app.module.js
2. wizard.js
3. wizard.module.js

And here’s is the error. The problem is that wizard.js is the controller, and it references app.wizard which is defined in wizard.module.js. So the problem is that the module app.wizard is not defined in the controller.

So, how can we fix this? Easy, just include the module definition before using it in the controller. Make app.js to look like this:
1. app.module.js
2. wizard.module.js
3. wizard.js

To accomplish this, just add a line to your gulpfile.js file in order to include the modules before the controllers, like this:

In this example, we see that we first include ‘client//.module.js’ and then ‘client//.js’.

The resulting app.js is this:

The problem was the order in which the files were concatenated by Gulp. Easy right? Well, it took me some time to notice this little detail :)

If you are facing the same error message, please take a look at the order in which you load the modules and dependencies into your app. I hope that you could find this post before spending some precious time trying to solve this.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

By | February 6th, 2015|angular, guides, how-to, javascript|2 Comments

Hello world!

Dear visitor,

Welcome! Today I’m starting my personal blog! Yay! I don’t think you will find this entertaining or pretty yet, but hopefully I’ll keep on track and will continue to add weekly content that you may find useful.

I’m a front-end web developer, I’ve been working on the web since 1999, focusing mostly on PHP and Javascript, so guess what?! This is the type of content I’ll be focusing on mostly.

I’m also an amateur photographer so I’ll probably be sharing some pictures with you all. I hope you like them.

For now, this is only a Hello world post, so I’ll just drop some contact information here for those who would like to keep in touch and make contact:
– LinkedIn: http://uy.linkedin.com/in/fabianvallejos/en
– Twitter: https://twitter.com/vallejosfab

Thanks and welcome!

By | January 7th, 2015|general|0 Comments