AngularJS Watch input validity directive

Question

i like to watch the validity of an input element inside a directive. My controller is always undefined . How can i watch properties like $valid , $invalid on a input element ?

app.directive("myElement", function()
{
    return {
        restrict: "A",
        templateUrl: "./Templates/tooltip.html",
        scope: {
        },
        compile: function (element, attrs) {
            return {
                pre: function preLink(scope, element, attrs, controller) {
                },
                post: function postLink(scope, element, attrs, controller) {
                   scope.$watch(function(){return controller.$invalid;},function(newVal,oldVal){
                   });
                }
             }
         }
}

Answer 1

For the controller argument of the (pre-, post-, -) link function to work you have to require one or more controllers:

return {
    require: "ngModel",
    ...
};

Or more:

return {
    require: ["ngModel", "foo", "bar"],
    ...
};

This will not solve your problem though; You need to define a controller in the directive and make sure that the root element of the template is a named form . So you can do:

Template:

<form name="theForm">
    <input name="myInput" ng-model="foo.name" />
</form>

Directive:

return {
    controller: function($scope) {
        $scope.watch("theForm.myInput.$valid", function(isValid) {
            ...
        });
    },
    ...
};