A light weight library to provide some extensions to Angular without jQuery.
bower install angular-extras --save
Include each file based on your need. For example:
<script src="bower_components/angular-extras/dist/angular-extras-dom.min.js"></script>
<script src="bower_components/angular-extras/dist/angular-extras-dom.min.js"></script>
This module provides some DOM related helper methods like jQuery but without using jQuery. All of the following methods return the instance of jQLite.
Get the descendant of element in the current set of matched elements, filtered by a selector.
angular.find('div'); // Get the first DIV element in the body
someDomeElementInDirective.find('input'); // Find the first input element in the directive's element
angular.findAll('div'); // Get all the descendant DIV elements in the body
someDomeElementInDirective.findAll('input'); // Find all the descendant input elements in the directive's element
someDomeElementInDirective.parents('div.foo'); // Find all the parent DIV elements with class "foo"
someDomeElementInDirective.closest('div.foo'); // Find all the parent DIV elements including self with class "foo"
<script src="bower_components/angular-extras/dist/angular-extras.min.js"></script>
<script src="bower_components/angular-extras/dist/angular-extras-form-directives.min.js"></script>
Include the module:
angular.module('myApp', ['...', 'angular.extras.form.directives'])
The attribute autofocus
of HTML5 only works when the page load but does not focus the input element when the
contents are loaded dynamically (like when views are loaded via route or ng-include
).
<input name="email" autofocus type="email" />
Focuses the DOM element based on the expression.
<input type="text" focus-on="isFocus" />
<script src="bower_components/angular-extras/dist/angular-extras.min.js"></script>
<script src="bower_components/angular-extras/dist/angular-extras-page-directives.min.js"></script>
Include the module:
angular.module('myApp', ['...', 'angular.extras.page.directives']);
Set classes on the body
element from anywhere through your DOM element.
<div body-classes="'new-class another-class' {{someScopeVariable}}"></div>
Converts plain HTML email text to a email link.
<email>john@example.com</email>
<email>{{user.email}}</email>
Set the page's <title>
value from any DOM element.
<div page-title="Users page"></div> <!-- Will set <title>Users page</title> -->
<div page-title>Friends page</div> <!-- Will set <title>Friends page</title> -->
Converts plain HTML url text to the link.
<url>https://google.com</url>
<url>{{user.linkedin}}</url>