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

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

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>

使用AngularJS获取Fullcalender HTML元素并进行更改

1 个答案: