使用 AngularJS 获取完整日历 HTML-Elements 并更改它们

Question

我正在使用 fullcalender，需要使用 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>")

如何在不触及 fullcalender 代码本身的情况下进行这些更改。

Answer 1

看看NgSanitize模块"The ngSanitize module provides functionality to sanitize 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>

使用 AngularJS 获取完整日历 HTML-Elements 并更改它们

Get fullcalender HTML-Elements with AngularJS and change them

fullcalendar

angularjs

angularjs-directive

jqlite