AngularJS Form Reset Directive

A directive that supports the native reset button type in AngularJS forms.

by GlobalDomestic

HTML

<div ng-controller="MyCtrl">
    <form reset-directive="myModel" name="form">
        <input type="text" ng-model="myModel.foo" />
        <input type="text" ng-model="myModel.bar" />
        <input type="reset" value="Reset" />
        <pre>myModel: {{ myModel | json }}</pre>
        <pre>myModelCopy: {{ myModelCopy | json }}</pre>
        <pre>form pristine: {{ form.$pristine }}</pre>
    </form>
</div>

JavaScript

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'MyCtrl', [ '$scope', function ( $scope ) {
    $scope.myModel = { foo: 'Boop', bar: 'Beep' };
    $scope.myModelCopy = angular.copy( $scope.myModel );
}]);

myApp.directive( 'resetDirective', [ '$parse', function ( $parse ) {
    return function( scope, element, attr ) {
        var fn = $parse( attr.resetDirective );
        var masterModel = angular.copy( fn( scope ) );

        // Error check to see if expression returned a model
        if ( !fn.assign ) {
            throw Error( 'Expression is required to be a model: ' + attr.resetDirective );
        }

        element.bind( 'reset', function ( event ) {
            scope.$apply( function () {
                fn.assign( scope, angular.copy( masterModel ) );
                scope.form.$setPristine();
            });

            // TODO: memoize prevention method
            if ( event.preventDefault ) {
                return event.preventDefault();
            }
            else {
                return false;
            }
        });
    };
}]);