AngularJS: Correct way of doing directive with dynamic template and replace option on?

Question

What is the easiest(and correct) way to have dynamic templates for directive and keep replace option (want to have all the attributes on my template).

I'm trying to create "link" directive that will be extension for ui-router/ui-sref : when the state is current state - we show just a text (not a link).

It's not a problem to do just dynamic templates via compile(or $compile service), but how could I keep replace option on, that passes all the directive attributes to the template.

So I would like to have

<ui-link ui-sref="dashboard.common" class="nav-alt__item">Dashboard</ui-link>

Like

<a ui-sref="dashboard.common" class="nav-alt__item">Dashboard</a>

in one case and

<span ui-sref="dashboard.common" class="nav-alt__item">Dashboard</span>

in another.

actually I don't need ui-sref for span, but it's not a big issue.

May be there is already existing extension solutions for ui-router.

Estus Flask · Accepted Answer · 2015-07-29 13:42:13Z

2

You can have dynamic templates by supplying a function as template, but usually it is the wrong way because you don't have interpolated attribute values or anything else there that could be useful for making decisions.

Nesting directives are what Angular is comfortable with.

app.directive('uiLink', function () {
  return {
    scope: {
      uiSref: '@',
      current: '@?'
    },
    transclude: true,
    template: [
      '<a ng-if="!current" ui-sref="{{uiSref}}" ng-transclude></a>',
      '<span ng-if="current" ng-transclude></span>',
    ].join('')
  };
});

replace is not a option when there are multiple root elements in a template. So optional attributes (class, etc) should belong to ui-link and don't have to be translated to nested elements.

answered Jul 29, 2015 at 13:42

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergiy Pereverziev · Accepted Answer · 2015-07-29 10:20:40Z

0

Dynamic templates? There probably isn't a truly "angular" way to do it. Use a static template:

<span>
  <span ng-if="isCurrent()">Dashboard</span>
  <a ui-sref="{{uiSref}}" ng-if="!isCurrent()">Dashboard</a>
</span>

answered Jul 29, 2015 at 10:20

Sergiy Pereverziev

4072 silver badges8 bronze badges

3 Comments

Stepan Suvorov Over a year ago

and what about attributes?

Sergiy Pereverziev Over a year ago

I would suggest not to use ui-sref attribute. Better would be <ui-link sref=""></ui-link>. So you add it to the scope and use it however you like

Stepan Suvorov Over a year ago

but I mean the rest of attributes: class, translate, etc.. In your solution I'll have to pass them manually 2 times

Collectives™ on Stack Overflow

AngularJS: Correct way of doing directive with dynamic template and replace option on?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related