Angular.js在ng-bind-html中嵌套花括号

Question

I am making a spelling app using JavaScript and Angular.js. When the user has spelled their word correctly, the view should say "Word already completed!", and when the user has not yet completed their word, the view should display a list of friends.

Therefore, I need to change the innerHTML of the object from within my JS script (so that it updates when the user spells their word correctly).

This is the if statement that I use to decide between the two innerHTMLs:

if(wordCompletedVar) {
  $scope.friendsHTML = "<li><a> Word already completed! </a></li>";
} else {
  $scope.friendsHTML = "<li class='user-display' style='padding: 15px' ng-repeat='friend in friendNames track by $index'><img  src='{{profilePicture($index)}}' class='img-circle user-display-img'><div class='user-display-name'><a href = '#/trade/{{getFriendUsername($index)}}' ng-click='playSound('whoosh')' style = 'color: white'>{{friend}}</a></div></li>";
}

In my HTML doc, I am trying to inject friendsHTML using ng-bind-html:

<ul class="dropdown-menu" id="friendsDropdown" ng-bind-html = "to_trusted(friendsHTML)"></ul> 

It works with the simple sentence, but with the more complicated HTML (with nested Angular.js curly brackets {{}}), the brackets display instead of the angular object (ie {{friends}}). The same happened when I used ng-bind-html without the to_trusted function.

This is a clearer view of the HTML I am trying (and failing) to inject:

<li class='user-display' style='padding: 15px' ng-repeat='friend in friendNames track by $index'>
  <img  src='{{profilePicture($index)}}' class='img-circle user-display-img'>
  <div class='user-display-name'>
    <a href = '#/trade/{{getFriendUsername($index)}}' ng-click='playSound('whoosh')' style = 'color: white'>{{friend}}</a>
  </div>
</li>

The to_trusted function that I am using is:

$scope.to_trusted = function(html_code) {
  return $sce.trustAsHtml(html_code);
};

(and I do include $sce in my controller).

How can I nest the curly-bracket angular notation within the ng-bind-html injection? I have found a lot of documentation on either the curly brackets or ng-bind-html, but I haven't seen anything on how to use them together (or how to accomplish what I am trying to accomplish in a different way-I am open to suggestions!)

Answer 1

The best way to handle this would be to avoid injecting HTML at all, and instead use a conditional statement like ng-if or ng-show .

something like the following:

<li ng-if="wordCompletedVar"><a> Word already completed! </a></li>

<li ng-if="!wordCompletedVar" class='user-display' style='padding: 15px' ng-repeat='friend in friendNames track by $index'>
  <img  src='{{profilePicture($index)}}' class='img-circle user-display-img'>
  <div class='user-display-name'>
    <a href = '#/trade/{{getFriendUsername($index)}}' ng-click='playSound('whoosh')' style = 'color: white'>{{friend}}</a>
  </div>
</li>

Answer 2

An alternative would be along the lines of making a directive as below. You can modify parameters if you want reuse etc -

app.directive('userDisplay', ['$compile',function ($compile) {
    return {
        template : '<input/>',
        link: function(scope, element, attrs) {

            scope.$watch('wordCompletedVar',function(){
                var html;
                if(scope.wordCompletedVar) {
                    html = "<li><a> Word already completed! </a></li>";
                  } else {

                    html= "<li class='user-display' style='padding: 15px' ng-repeat='friend in friendNames track by $index'><img  class='img-circle user-display-img'><div class='user-display-name'><a href = '#/trade/{{getFriendUsername($index)}}' ng-click='playSound(\"whoosh\")' style = 'color: white'>{{friend}}</a></div></li>"

                  }
                  element.html(html);
                  $compile(element.contents())(scope);

        });
    }
    };
}]);