How to Append Dynamic Template in AngularJS Directive

Question

I want to create a directive like:

<div ng-refreshing-when="x">Some Content In Here</div>

so when x=true, it will do some css and fade a spinner div over top, then when x=false, the spinner will fade out. I want to append a div (which is hidden by css) to the parent div, NOT replace the content. My current code is here, but the ngRefreshingWhen isn't triggering the ng-if:

http://plnkr.co/edit/griUYR6RY46x5DlqVHWU?p=preview

I set:

 $scope.refreshing = false;

so the "refreshing" text shouldn't be there... How can I accomplish this?

different approach but would this work? stackoverflow.com/questions/20740213/… — o4ohel
– o4ohel, Commented Jun 30, 2015 at 21:54
just as a side note, it's not recommended to create custom directives which start with ng-, as ng- are meant to signify that the directive is implemented in the core framework. — Claies
– Claies, Commented Jun 30, 2015 at 22:18

Daniel Haley · Accepted Answer · 2015-06-30 22:14:24Z

1

You should be able to use transclude and put the HTML in the template:...

angular.module('ngRefreshingWhen',[])
    .directive('ngRefreshingWhen', function ($compile) {
        return {
            restrict: 'A',
            transclude: true,
            template: '<div class="refresher" ng-if="ngRefreshingWhen"><p>Refreshing</p></div><div ng-if="!ngRefreshingWhen" ng-transclude></div>',
            scope: {
                ngRefreshingWhen: '='
            }
        };
    });

If the HTML is more complicated, put it in a separate file and use templateUrl.

http://plnkr.co/edit/28Eq0HARKF0KXpYJwBTS?p=preview

answered Jun 30, 2015 at 22:14

Daniel Haley

53k7 gold badges75 silver badges97 bronze badges

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

1 Comment

DrZ Over a year ago

I'm aware of using templates and trnasclusion, but the issue is I need to apply a class to the div, then append the template code right after the '<p>Some Stuff</p>' that's inside the div with the directive.

DrZ · Accepted Answer · 2015-07-01 16:26:56Z

        <div> <!-- Parent Div -->
          <div ng-refreshing-when="refreshing"></div>
          <p>Some Stuff I Want to Keep</p>
        </div>

&

angular.module('ngRefreshingWhen', [])
  .directive('ngRefreshingWhen', function($compile) {
    return {
      restrict: 'A',
      scope: {
        ngRefreshingWhen: '='
      },
      template: '<div class="refresher" ng-if="ngRefreshingWhen"><i class="fa fa-spin fa-refresh"></i></div>',
      link: function(scope, element, attrs) {
        // add has-refresher class
        element.parent().addClass('has-refresher');
      }
    };
  });

http://plnkr.co/edit/xRgqqOfz9IuskL1kn057?p=preview

I did it differently, I added directive inside, then added the needed class to it's parent, same result, just added an element instead of trying to add an attribute to the parent.

Collectives™ on Stack Overflow

How to Append Dynamic Template in AngularJS Directive

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related