javascript - 处理 Angular 模板文件内标签的脚本不起作用

Question

我有这个巨大的代码，这里没有必要展示，但他会操作这个div:

<div data-calendar="true"></div>

这样查找:

var calendar = $('[data-calendar]');

如果标签位于我的主 Angular 布局文件中，则脚本可以工作，但是当标签位于 Angular 模板文件中时，脚本根本不起作用。

如何解决这个问题？我已经将此脚本放在 Angular 脚本之后，以便使 Angular 脚本之前运行，但根本不起作用。

Answer 1

在模板中包含脚本永远不会起作用，您需要能够控制它何时运行，以便在添加、替换 div 等任何时候运行，这可能在摘要发生时发生。

在这种情况下，最好的方法是使用指令。

<div calendar></div>

.directive('calendar', function() {
  return {
    link: function (scope, element) {
        element.jqCalendar(); // jQuery plugin should be avail here, if you included jQuery and the plugin before angular.
    }
  };
});