calling directives by Logic on angularjs

Question

I have some notify message to display, which using difference template by difference notify type.

Now I have make the template into directives, I display the right directive by using ng-switch, like this :

<ul>
<li ng-repeat="notify in notifies | orderBy: 'id'" >
    <div ng-switch on="notify.type">
        <div ng-switch-when="1">
            <span ng-notify-A ng-notify="notify"></span>
        </div>
        <div ng-switch-when="2">
            <span ng-notify-B ng-notify="notify"></span>
        </div>
        <div ng-switch-when="3">
            <span ng-notify-C ng-notify="notify"></span>
        </div>
    </div>
</li>
</ul>

Yet I really think it can be better, with setting java script logic then output, instead of ng-switch. It should be work with some array to store [type => directive Name ] like this :

array[1]="ng-notify-A";
array[2]="ng-notify-B";
array[3]="ng-notify-C";

I come up to this and don't have idea what's next I can do ... Like I don't know if I can add some logic on directives, or not.

What's the difference between your directives? I would suggest have only one ng-notify and do some contextual processing depending on the nature of the notify binding — floribon
– floribon, Commented Mar 18, 2015 at 0:32

Jason Swett · Accepted Answer · 2015-03-18 01:09:22Z

1

I don't know if this idea is the best possible solution but it would at least be more DRY.

Create three templates called ng-notify-A.html, ng-notify-B.html, etc. Then do an <ng-include src="notify.type + '.html'">.

answered Mar 18, 2015 at 1:09

Jason Swett

45.4k70 gold badges231 silver badges360 bronze badges

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

Comments

dting · Accepted Answer · 2015-03-18 21:52:03Z

0

You can do it using ngInclude like so:

.constant('tpl_array', {
  '1': 'notify1.tpl.html',
  '2': 'notify2.tpl.html',
  '3': 'notify3.tpl.html'
});

.directive("myNotification", function(tpl_array) {
  return {
    template: '<ng-include src="getTemplateUrl()" />',
    scope: {
      notify: '='
    },
    restrict: 'E',
    controller: function(scope) {
      scope.getTemplateUrl = function() {
        return tpl_array[scope.notify.type];
      };
    }
  };
});

# some.tpl.html
<ul>
  <my-notification ng-repeat="notify in notifies | orderBy: 'id'" notify="notify">
</ul>

# notify1.tpl.html
<li><span ng-notify-A ng-notify="notify"></span></li>

# notify2.tpl.html
<li><span ng-notify-B ng-notify="notify"></span></li>

# notify3.tpl.html
<li><span ng-notify-C ng-notify="notify"></span></li>

edited Mar 18, 2015 at 21:52

answered Mar 18, 2015 at 0:34

dting

39.4k10 gold badges98 silver badges117 bronze badges

1 Comment

WaaahCow Over a year ago

can you change the answer to return tpl_array[scope.notify.type]; instead of using switch ?

Collectives™ on Stack Overflow

calling directives by Logic on angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related