使用AngularJS获取完整的HTML元素并更改它们

Question

我正在使用全日历，需要使用AngularJS更改一些导航按钮。我对AngularJS没有太多经验，所以JS代码是这样的：

var filter = $(".fc-filter-button");
filter.html("<i class='fas fa-filter'></i>");
filter.attr("id", "dropdownFilterButton");

但是我如何使用AngularJS存档这个和其他一些常见的JS/JQuery任务。我知道我也可以使用JQuery，但想以正确的Angular方式做到这一点。

我尝试了这样的事情：

element[0].getElementsByClassName('fc-filter-button').html("<i class='fas fa-filter'></i>")

或

var queryResult = element[0].querySelector('.fc-filter-button');
angular.element(queryResult).html("<i class='fas fa-filter'></i>")

如何在不接触全日历代码本身的情况下进行这些更改。

Answer 1

看看 NgSanitize 模块 "ngSanitize 模块提供了清理 HTML 的功能"。

这是一个基本的例子，应该让你朝着正确的方向前进。

angular.module('app', ["ngSanitize"])
.controller('myCtrl',function($scope){
$scope.content = "<p>The initial html</p>";
$scope.changeHtml = function(){
  $scope.content = "<h3>The changed html</h3>";
};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular-sanitize.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<button ng-click="changeHtml()">Change html</button>
<div ng-bind-html="content">
</div>
</div>