AngularJS — DOM

Element References

app.directive('myDirective', function() {
  return {
    link: function(scope, element, attrs) {
      element.css('color', 'red');
      element.on('click', function() {
        element.toggleClass('active');
      });
    }
  };
});

ng-bind

<p ng-bind="name"></p>
<p ng-bind-html="htmlContent"></p>

jqLite

// AngularJS includes jqLite
element.addClass('active');
element.removeClass('active');
element.hasClass('active');
element.css('color', 'red');
element.text('New text');
element.html('<b>Bold</b>');

Custom Directive DOM

app.directive('resizable', function() {
  return {
    link: function(scope, element, attrs) {
      element.resizable();
      element.on('resizestop', function(event, ui) {
        scope.$emit('resized', ui.size);
      });
    }
  };
});

DOM Events

element.on('click', function(event) {
  scope.$apply(function() {
    scope.handleClick(event);
  });
});

Mini Practice

1. Manipulate DOM with directives
2. Use jqLite methods
3. Handle DOM events
4. Create custom directives

Up Next

Continue with Tables — AngularJS tables.