TemplateUrl directive: AngularJs

Question

it is possible to read the scope into templateUrl of directive?

I want to do something like this :

mDirective.directive('directive', [function () {
    return {
        restrict: 'A',
        scope: {
            types :'=types'
        },

templateUrl:'.mytemplate/'+scope.types+'.html'

Answer 1

Scope is not available in the directive's templateUrl. There is a feature request on github for this: Either add scope to attributes that are passed to templateUrl function or preprocess attributes based on scope parameters.

Here are two options (the second being the more general purpose):

Attribute: Scope isn't available. But the raw attributes are. So, if the raw attribute works for you, for instance if it's just a static string like this:

<div directive types="test1"></div>

Then we can pass a function into templateUrl. The second parameter will be the attributes, so you can construct a template URL with that string like this:

templateUrl: function(elem, attrs){ return ('mytemplate/'+attrs.types+'.html')},

But this doesn't work if types may change, so a better solution for you is likely:

ngInclude You can reference a scope variable inside an ngIncludesource expression. So instead of using templateURL we use template and then let ngInclude handle the setting/changing the template:

template: '<div ng-include src="\'mytemplate/\'+types+\'.html\'"></div>',

You could also manually compile and add your template inside the directive. But using ngInclude is easy and also enables animation.

demo plunker showing both options, and with a couple buttons to toggle the template and see ngInclude switch.