Simple directive to work like a binding expression

Question

what i am trying to do is create the following markup:

<current-user />

this directive should simply inject the current users username just like a binding expression {{currentUser.name}}

here is what i have but i am losing my span tag at the end for the caret:

HTML:

<a href="" class="dropdown-toggle" data-toggle="dropdown">
  <i class="fa fa-user"></i> 
  <current-user /> 
  <span class="caret"></span>
</a>

Javascript:

app.directive('currentUser', function ($rootScope, auth) {
    return {
        restrict: 'E',
        transclude: true,
        compile: function (elem) {
            $rootScope.$watch('auth.profile', function (profile) {
                if (profile) {
                    elem.html(profile.email);
                }
            });
        }
    }
});

any help would be greatly appreciated

Ahh.. `$rootScope.$watch` in `compile` of directive, why? & may I also know why `elem.html` as email would be simple text.. — Pankaj Parkar, Mar 24 '16 at 11:52
pretend i'm not using rootscope and the username could be anything. i just choose email. — Marco, Mar 24 '16 at 11:56

score 1 · Accepted Answer · answered Mar 24 '16 at 12:00

This is a known issue with some browsers.

Use a non-self closing directive to fix the problem.

  <a href="" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-user"></i>
    <current-user></current-user>
    <span class="caret">Test</span>
  </a>

Working Demo

Simple directive to work like a binding expression

1 Answers1