AngularJS - How do I access the form defined inside templateUrl in my directive?

I am trying to access the form inside my directive for validation purposes, so I would like to access the $ setPristine, however I cannot figure out how to get the form if created with templateUrl.

I have a plunker detailing the issue here:

I am getting the error:

Controller 'form', required by directive 'testDirective', can't be found!


Here is the relevant plunger code:


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

app.directive("testDirective", function() {
  return {
    restrict: 'E',
    scope: {},
    templateUrl: "formTemplate.html",
    require: "^form",  // <-- doesn't work
    link: function (scope, element, attrs, ctrl) {
      console.log(ctrl); = function() {
          // Would like to have access to the form here
          // ctrl.$setPristine();
    controller: function($scope) {
      $scope.firstName = "Mark";

      $ = function(form) {



<form name="testForm" ng-click="save(testForm)">
  <input type="text" ng-model="firstName" />
  <input type="submit" value="Save" />


How can I attach a form in formTemplate.html to the isolated area of ​​my directive?


source to share

1 answer

Try this in your directive:

var form1 = element.find('form').eq(0);
formCtrl = form1.controller('form');


this should hijack the controller for the form.



All Articles