javascript - Angular: get Template URL from parent directive -

javascript - Angular: get Template URL from parent directive -

i understand can dynamically set templateurl base of operations on alternative dom attribute template-url="foo.html" given next code:

angular.module('foo').directive('parent', function() { homecoming { restrict: 'e', link: function(scope, element, attrs) { // code }, templateurl: function(elem,attrs) { homecoming attrs.templateurl || 'some/path/default.html' } } });

however, need take step farther , pass string 1 level deeper, kid directive.

given html:

usage in main project

<parent parent-template="bar.html" child-template="foo.html"></parent>

the kid not exposed in cases, if child-template set, needs implicitly replace templateurl kid <child></child> elements located in parent foo.html.

the require: '^parent' attribute passes info scope scope, i'm not seeing available in templateurl when it's declared.

foo.html

<h1>title</h1> <child ng-repeat="item in array"></child>

directives

angular.module('foo').directive('parent', function() { homecoming { restrict: 'e', link: function(scope, element, attrs) { // code }, templateurl: function(elem,attrs) { homecoming attrs.parenttemplate || 'some/path/default.html' }, scope: { childtemplate: '=childtemplate' } } }) .directive('child', function() { homecoming { restrict: 'e', link: function(scope, element, attrs) { // code }, templateurl: function(elem,attrs) { homecoming ??? // parent.attribute.childtemplate? || 'some/path/default.html' }, require: '^parent', scope: { childtemplate: '=childtemplate' } } });

update

the old reply (see bellow) won't work because it's possible access controller of required directives within link functions, , templateurl function gets executed before link functions.

therefore way solve handle in templateurl function of kid directive. this function takes 2 arguments: telement , targs.

so, have find element of parent directive , access attribute child-template. this:

angular.module('testapp', []) .directive('parent', function() { homecoming { restrict: 'e', link: function(scope, element, attrs) { }, transclude:true, templateurl: function(elem,attrs) { homecoming attrs.parenttemplate || 'default.html' } } }) .directive('child', function() { homecoming { restrict: 'e', require:'^parent', templateurl: function(elem,attrs) { //if jquery loaded elem jquery element, can utilize function "closest" if(elem.closest) homecoming elem.closest("parent").attr("child-template") || 'default.html'; //if jquery isn't loaded have manually var parentdirectiveelem=elem; do{ parentdirectiveelem=parentdirectiveelem.parent(); }while(parentdirectiveelem.length>0 && parentdirectiveelem[0].tagname.touppercase()!="parent"); homecoming parentdirectiveelem.attr("child-template") || 'default.html'; } } }); example old answer

since isolating scope, seek this, it's bit hacky guess should work:

angular.module('foo').directive('parent', function() { homecoming { restrict: 'e', controller: function($scope) { this.childtemplate=$scope.childtemplate; }, link: function(scope, element, attrs) { }, templateurl: function(elem,attrs) { homecoming attrs.parenttemplate || 'some/path/default.html' }, scope: { childtemplate: '@' } } }) .directive('child', function() { homecoming { restrict: 'e', require: '^parent', link: function(scope, element, attrs, parentcontroller) { if(parentcontroller.childtemplate) element.data("childtemplate", parentcontroller.childtemplate); }, templateurl: function(elem,attrs) { homecoming elem.data("childtemplate") || 'some/path/default.html' } } });

javascript angularjs templates angularjs-directive angularjs-scope