How to use a directive to dynamically change a template?

Question

I have this directive

angular.module('starter.directive', []) .directive('answer', ['Helper', function (Helper) { return { require: "logic", link: function (scope, element, attrs, logicCtrl) { var htm = ''; if(logicCtrl.test == 'a') { htm = '<p>a</p>' } if(logicCtrl.test == 'b') { htm = '<p>b</p>' } }, template: '' // somehow use htm here } }]);

I'm trying to use the htm for the template,

Any ideas?

Ruslan Ismagilov · Accepted Answer · 2014-04-28 06:31:14Z

You can just put htm into scope of directive and use it inside template.

angular.module('starter.directive', []) .directive('answer', ['Helper', function (Helper) { return { require: "logic", link: function (scope, element, attrs, logicCtrl) { scope.htm = ''; if(logicCtrl.test == 'a') { scope.htm = '<p>a</p>' } if(logicCtrl.test == 'b') { scope.htm = '<p>b</p>' } }, template: '{{htm}}' // somehow use htm here } }]);

UPDATE

To compile html strings into template you need to use $compile service, just possible example:

angular.module('starter.directive', []) .directive('answer', ['Helper', function (Helper) { return { require: "logic", link: function (scope, element, attrs, logicCtrl) { var htm = ''; if(logicCtrl.test == 'a') { htm = '<p>a</p>' } if(logicCtrl.test == 'b') { htm = '<p>b</p>' } var el = angular.element(htm); compile(el.contents())(scope); element.replaceWith(el); } } }]);

by the way, if i return HTML it gets into the DOM as a sting. do you know how to return plain HTML
Look at angular $compile service and check the update. Hope it helps.

Collectives™ on Stack Overflow

How to use a directive to dynamically change a template?

1 Answer 1

UPDATE

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

2 Comments

Linked

Related