Angular JS ng-message inside directive

Question

I have some input fields inside custom directive. I\'m trying to use ng-message to display validation error text for the fields inside custom directive.

When I do submit

Answer 1

You have explicitly defined isolated scope for your directive, so plnkrForm does not exist. Quickest way to fix this is that you drop the isolated scope. Based on your example, you don't need it anyway.

So directive becomes

app.directive('nameInfo', function() {
  return {
    templateUrl: 'name.html'
  };
});

And this being the case, directive is a bit of an overkill. You could get same result using ng-include, too. So you could replace this

with this

---

If you insist doing this using a directive and isolated scope, here's how it's done. Pass form into directive and use it in your template/link/controller and change template accordingly.

In your "main" page

JavaScript

app.directive('nameInfo', function() {
  return {
    templateUrl: 'name.html',
    scope: {
      form: '=',
      name: '='
    }
  };
});

Directive template

  
  

       Required
  

---

Now, I know your intentions are good as you want to avoid "DRY". If you study the examples, you'll notice that you get same result, functionality and reusability by using simple ng-include. Here we have achieved nothing but added, unnecessary complexity.