Extending built-in directives

by ospatil

HTML

<script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app='myApp'>
    <div ng-controller="controller">
        <div ng-show="isFormDirty" class="alert alert-error"><strong>You dirtied the form.</strong></div>
        <form name="myForm">
            <fieldset>
                <legend>User Details</legend>
                <label>First Name:</label>
                <input type="text" ng-model="user.firstName" placeholder="First Name ..." required>
                <label>Last Name:</label>
                <input type="text" ng-model="user.lastName" placeholder="Last Name ..." required>
                <div>
                  <button type="button" class="btn" ng-click="reset()" ng-disabled="myForm.$invalid">Reset</button>
                </div>
              </fieldset>
        </form>
    </div>
</div>

JavaScript

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

myApp.controller('controller', ['$scope', function ($scope) {
    $scope.master= {};
    $scope.isFormDirty = false;
    
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
        $scope.$broadcast('formClean');
        $scope.isFormDirty = false;
    };
    
    $scope.$on('formDirty', function (event, formName) {
        $scope.isFormDirty = true;
    });
    
    $scope.reset();
}]);

myApp.directive('form', [function () {
    return {
        restrict: 'E',
        require: 'form',
        link: function (scope, element, attrs, ctrl) {
            scope.$watch(attrs.name + '.$dirty', function (newValue, oldValue) {
                if (newValue != oldValue && newValue === true) {
                    scope.$emit('formDirty', attrs.name);
                } 
            });
            scope.$on('formClean', function () {
                ctrl.$setPristine();             
            });
        }
    };
}]);