CODEWITHSUNDEEP
angularjsangularjs-directive
Raghu
Raghu

Reputation: 31

How to set closest form name from inside directive

I want to set the name of form inside my directive. But unable to do so as I get an error TypeError: undefined is not a function. Can you help me fix this?

Here is the fiddle

HTML:

<div>
  <form>
  <input type="text" value="my value" my-element/>
</form>
</div>

Directive:

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

myApp.directive('myElement', function() {
return{
    restrict:'A',
    compile:function(element, attrs)
    {
        console.log("Hello Element");
        console.log(element.closest("form").attr("name"));
    }
}
});

Upvotes: 0

Views: 1103

Answers (1)

SomeKittens
SomeKittens

Reputation: 39522

element is not a jQuery element, so you can't call jQuery methods on it. Fortunately, there's an easier way:

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

myApp.directive('myElement', function() {
    return{
        restrict:'A',
        compile:function(element, attrs)
        {
            console.log("Hello Element");
            console.log(element[0].form);
        }
    }
});

Every HTMLElementObject has a form attribute that points to the encapsulating form.

JSFiddle (note that you needed to add ng-app="myApp" to the parent div element.

Upvotes: 3

Related Questions