AngularJS is pretty neat. the simplest and most-common tasks are super-easy, but sometimes there’s some little trouble, especially if you try to do things in a less-AngularJS way.

like many modern libraries, it seems, AngularJS suffers from a severe lack of accessible documentation. for example, $apply is described as follows:

$apply(exp)

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

it then goes on to completely fail to provide any actual example usage.

example usages, you guys! example usages!

so here’s some example usage for you:

// respond to a Bootstrap carousel "slid" event
$('#my-carousel').on('slid', '.carousel', function() {
  // first, since we're outside AngularJS, we need to grab
  // the AngularJS scope that this element resides in
  var scope = angular.element(this).scope();

  // next, we find the active item in the carousel, and grab
  // some data-* from it
  var active = $(this).find('.active');
  var description = active.attr('data-description');

  // pretend we have "<p>{{description}}</p>" in the HTML,
  // which we want to update with the data we grabbed
  scope.description = description;

  // finally, because we've made changes to the model without
  // going through an ng-* action, we need to $apply
  scope.$apply();

  // though the above, stricken-out code DOES work, Rob Juurlink
  // left a comment revealing a better way (thanks!)
  // see this article for an explanation.
  scope.$apply(function() {
    scope.description = description;
  });

});

note that even if you were to call a method – say, scope.updateDescription(description) – to update the variables, you might feel as if you’re operating within AngularJS, and so everything will be fine, but your feelings are betraying you, like when Darth Vader was fighting Luke Skywalker. if the trigger for a model change comes from outside AngularJS, however indirect, you need to call $apply()!

and again, if you want an entirely-AngularJS solution, directives have got you covered. best of luck to you figuring out how to use those from the documentation. I was only able to get as far as making bootstrap.js error out and die >_>

Post filed under Thought and tagged , , .

11 Comments

  1. Jason Lunn says:

    I wish I had known the question that led me to your answer a couple of months ago. Thanks!

  2. goldieswx says:

    Maybe I am months late, but I’d suggest you create a directive and avoid “the jQuery way”. (I have to agree there are too many concepts, not enough examples on the angular api doc for directives)

    1. First remove the id=”myCarousel”.
    2. Use a my-carousel attribute instead
    3. Create a directive, as the following

    angular.module(‘yourmodule’, [])

    .directive(‘myCarousel’, function() {
    return {
    restrict: ‘A’,
    link: function(scope, element, attrs) {
    $(element).on(‘slid’, ‘.carousel’, function() {
    var active = $(this).find(‘.active’);
    scope.description = active.attr(‘data-description’);
    scope.$apply();
    }
    }
    }
    })

    4. try to remove jquery references (usually use angular. instead of $.)

    • That Guy Ben says:

      never too late to give good advice! I have not used AngularJS, myself, in quite some time, but hopefully someone else will find this useful :)

  3. Rob Juurlink says:

    Wondering, shouldn’t it be like this?

    scope.$apply(function() {
    scope.description = description;
    });

  4. Rob Juurlink says:

    Found your page by googling “angularjs apply example”. Thank you for the example, it helped me out!

  5. Thank you! I was stuck until I found this. :)

  6. Peter Terkildsen says:

    Thanks for posting this tip. I searched the documentation as well, and got frustrated by the lack of examples. You helped me out, and made me understand where I went wrong. :-)

  7. That Guy Ben says:

    I wish every documentation for every language contained example uses. examples are amazing. I’m glad my one example could be useful for someone else :)

  8. Thank you! Thank you! Thank you! I felt like I was out on a limb on this one. I did not see anywhere how to call $apply() … Seeing your example made all things clear. You made my day :-)

    Chris

  9. Thanks for the useful information. I’m still trying to wrap my mind around the way AngularJS does things. I’m not really close.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By submitting this form, you accept the Mollom privacy policy.