Question

我正在使用JavaScript和Angular.js创建一个拼写应用程序。当用户拼写正确的单词时，视图应该说＆＃34; Word已经完成！＆＃34;，当用户还没有完成他们的单词时，视图应该显示朋友列表。

因此，我需要从我的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);

        });
    }
    };
}]);

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

2 个答案: