How to specify model to a ngInclude directive in AngularJS?

Question

I would like to use the same HTML template in 3 places, just each time with a different model. I know I can access the variables from the template, but there names will be d

Answer 1

I hear you! ng-include is not that reusable because it has access to the global scope. It's a little weird.

There should be a way to set local variables. Using a new directive instead of ng-include is a cleaner solution.

The ideal usage looks like:

The directive is:

.directive(
  'ngIncludeTemplate'
  () ->
    {
      templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
      restrict: 'A'
      scope: {
        'ngIncludeVariables': '&'
      }
      link: (scope, elem, attrs) ->
        vars = scope.ngIncludeVariables()
        for key, value of vars
          scope[key] = value
    }
)

You can see that the directive doesn't use the global scope. Instead, it reads the object from ng-include-variables and add those members to its own local scope.

It's clean and generic.