AngularJS custom form component / directive using ng-model

Viewed 3582

Angular custom form component / directive and $dirty property

When using regular input, such as

<form name="myForm">
  <input type="text" ng-model="foobar">
</form>

after typing in the input box myForm.$dirty is true.

I'd like to create a simple directive such as

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      fooBar: '='
    },
    template: '<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>'
  };
});

Sample usage would be

<form name="myForm">
  <my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>

and after user clicks on any of the two buttons, myForm$dirty is set to true.

How is this accomplished?

1 Answers
Related