angular.module("app", []) .controller("controller", ["directiveHandler", function(directiveHandler) { var self = this; self.pristineForm = function(directiveName) { var directiveName = directiveName ? directiveName : 'myFormDirective'; directiveHandler.getDirective(directiveName).pristineForm(); } }]) .directive("myFormDirective", ["directiveHandler", function(directiveHandler) { return { restrict: "E", template: `<div> <form name="myForm"> Username : <input type="text" name="username" ng-model="username" required/> <div ng-show="myForm.username.$dirty && myForm.username.$invalid"> Please fill in username. </div> <div>Form $pristine : {{myForm.$pristine}}</div> </form> </div>`, replace: true, scope: { }, link: function($scope, $elm, $attrs, $ctrl) { var directiveNameAttr = $attrs.dirName ? $attrs.dirName : "myFormDirective"; directiveHandler.registerDirective(directiveNameAttr, $scope); $scope.username = ""; $scope.pristineForm = function() { $scope.myForm.$setPristine(); } } }; }]).factory('directiveHandler', function() { var instance_map = {}; var service = { registerDirective: registerDirective, getDirective: getDirective, deregisterDirective: deregisterDirective }; return service; function registerDirective(name, ctrl) { instance_map[name] = ctrl; } function getDirective(name) { return instance_map[name]; } function deregisterDirective(name) { instance_map[name] = null; } });
<div ng-app="app" ng-controller="controller as ctrl"> <my-form-directive dir-name="myFormDir"></my-form-directive> <div ng-click="ctrl.pristineForm('myFormDir')"><button>Set Form Pristine</button></div>. <my-form-directive dir-name="myFormDir2"></my-form-directive> <div ng-click="ctrl.pristineForm('myFormDir2')"><button>Set Form Pristine</button></div> </div>