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

Question

我正在使用JavaScript和Angular.js制作拼寫應用。 當用戶正確拼寫了他們的單詞時，視圖應顯示“單詞已經完成！”，而當用戶尚未完成其單詞時，視圖應顯示朋友列表。

因此，我需要在我的JS腳本中更改對象的innerHTML（以便在用戶正確拼寫單詞時更新該對象）。

這是我用來確定兩個innerHTML之間的if語句：

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>";
}

在我的HTML文檔中，我嘗試使用ng-bind-html注入friendsHTML：

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

它適用於簡單的句子，但適用於更復雜的HTML（帶有嵌套的Angular.js大括號{{}}），而不是尖銳的對象（即{{friends}}）顯示括號。 當我使用不帶to_trusted函數的ng-bind-html時，也會發生同樣的情況。

這是我嘗試（但失敗）注入的HTML的更清晰視圖：

<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>

我正在使用的to_trusted函數是：

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

（並且我的控制器中確實包含$ sce）。

如何在ng-bind-html注入中嵌套花括號角度符號？ 我已經在大括號或ng-bind-html上找到了很多文檔，但是關於如何一起使用它們（或者如何以其他方式完成我要完成的工作），我還沒有看到任何東西。歡迎提出建議！）

Answer 1

處理此問題的最佳方法是完全避免注入HTML，而應使用ng-if或ng-show類的條件語句。

類似於以下內容：

<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

另一種選擇是遵循以下指令。 如果您想重復使用，可以修改參數-

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);

        });
    }
    };
}]);