使用 angular.element 通过 ng-click 添加元素

Question

我正在尝试在完整日历（http://arshaw.com/fullcalendar/docs/）标题的右侧添加几个自定义按钮。

我正在使用angular.element添加这样的按钮：

   var calendarHeaderRight = angular.element(".fc-header-right");
   if (calendarHeaderRight)
       calendarHeaderRight.html('<div><a href="#" ng-click="toggleCalendarList()" class="btn btn-sm btn-info">Calendar</a><a href="#" ng-click="toggleCalendarList()" class="btn btn-sm btn-success">List </a></div>');

这些按钮会附加到日历中并显示出来。问题是当我单击按钮时没有任何反应。

所以问题是，如何附加可以单击的元素？

谢谢

托马斯

Answer 1

var element = $compile(angular.element('<div><a href="#" ng-click="toggleCalendarList()" class="btn btn-sm btn-info">Calendar</a><a href="#" ng-click="toggleCalendarList()" class="btn btn-sm btn-success">List </a></div>'))(scope);

然后，您可以将此元素包装在div 中。这是关于编译的角度文档。

：） 享受它。

Answer 2

    var html = angular.element('<div><a href="#" ng-click="toggleCalendarList()" class="btn btn-sm btn-info">Calendar</a><a href="#" ng-click="toggleCalendarList()" class="btn btn-sm btn-success">List </a></div>')
    var compiled = $compile(html)
    calendarHeaderRight.html(html)
    compiled($scope)

Angular 中的视图编译基本上遍历您提供给它的任何节点的整个 DOM 树，创建一个函数，当调用时，它将执行它在该 DOM 树中找到的每个指令的每个链接函数，具有适当的范围、元素、属性和（可选）控制器。

泰勒所做的几乎同样的事情刚刚崩溃了。