Angular.js вложенные фигурные скобки в ng-bind-html

Question

Я делаю орфографическое приложение с использованием JavaScript и Angular.js. Когда пользователь правильно произнес свое слово, в представлении должно быть указано «Слово уже завершено!», И когда пользователь еще не завершил свое слово, в представлении должен отображаться список друзей.

Поэтому мне нужно изменить innerHTML объекта из моего JS-скрипта (чтобы он обновлялся, когда пользователь правильно произносит свое слово).

Это если заявление, что я использую, чтобы выбрать между двумя 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>"; 
} 

В моем HTML документ, я пытаюсь внедрить friendsHTML с помощью нг-BIND-HTML:

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

Он работает с простым предложением, но с более сложным HTML (с вложенными фигурными скобками Angular.js {{}}) вместо углового объекта отображаются скобки (т.е. {{friends}}). То же самое произошло, когда я использовал ng-bind-html без функции to_trusted.

Это более четкое представление о 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

Альтернативой было бы по линии принятия директивы, как показано ниже. Вы можете изменять параметры, если вы хотите повторно использовать и т. Д. - вам нужно использовать службу `$ compile`, если вы хотите дважды оценивать выражения.

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

     }); 
    } 
    }; 
}]);