If you want to step up in your AngularJS knowledge, $parse is one of the most important services that you should know about. It is used in most of the directives, and opens up your imagination to a new set of possibilities.

So, what does it do? Let’s start with a place we all well know: ngClick.

ngClick directive, takes an expression, and executes the expression when the directive element is clicked. So, how does it work internally? Yep, you guessed it: with $parse.

$parse takes an expression, and returns you a function. When you call the returned function with context (more on that later) as first argument, it will execute the expression with the given context.

It will execute the expression with the given context.

Context is a pure javascript object, as far as $parse is concerned. Everything in the expression will be run on this object.

Let’s see it with an example:

function MyService($parse) {
  var context = {
    author: { name: 'Umur'},
    title: '$parse Service',
    doSomething: function (something) {
      alert(something);
    }
  };
  var parsedAuthorNameFn = $parse('author.name');
  var parsedTitleFn = $parse('title');
  var parsedDoSomethingFn = $parse('doSomething(author.name)');

  var authorName = parsedAuthorNameFn(context);
  // = 'Umur'
  var parsedTitle = parsedTitleFn(context);
  // = '$parse Service'
  var parsedDoSomething = parsedDoSomethingFn(context);
  // shows you an alert 'Umur'
}

So this is very cool, we can evaluate strings with a context safely. Let’s write a very basic myClick directive.

angular.module('my-module', [])
  .directive('myClick', function ($parse) {
    return {
      link: function (scope, elm, attrs) {
        var onClick = $parse(attrs.myClick);
        elm.on('click', function (e){
          // The event originated outside of angular,
          // We need to call $apply
          scope.$apply(function () {
            onClick(scope);
          });
        });
      }
    }
});

See, the pure javascript object turns out to the our scope!

This works, but if you look at the docs of ngClick, it lets us to inject $event object to the function. How does that happen? It is because the parsed function accepts an optional second argument for additional context.

We have access to event object in the click callback, and we can just pass this through.

angular.module('my-module', [])
  .directive('myClick', function ($parse) {
    return {
      link: function (scope, elm, attrs) {
        var onClick = $parse(attrs.myClick);
        elm.on('click', function (e){
          // The event originated outside of angular,
          // We need to call $apply
          scope.$apply(function () {
            onClick(scope, {$event: e});
          });
      });
    }
  }
});

And the usage:

<a href=""
   ng-click="doSomething($event.target)">link</a>

Bonus

If you don’t need to pass additional context, you can save some bytes and remove code of the code. Here is a way to do it cooler. How does it work exercise it left to the reader. Please leave a comment if you think you’ve found the answer!

angular.module('my-module', [])
  .directive('myClick', function ($parse) {
    return {
      link: function (scope, elm, attrs) {
        var onClick = $parse(attrs.myClick);
        elm.on('click', function (e) {
          scope.$apply(onClick);
        });
      }
    }
});