elem.colResizable 不是函数

Question

我正在尝试在 angularjs 中调整 table 列的大小我正在使用以下指令

myApp.directive('colResizeable', function() {
  return {
    restrict: 'A',
    link: function(scope, elem) {
      setTimeout(function() {
        elem.colResizable({
          liveDrag: true,
          gripInnerHtml: "<div class='grip'></div>",
          draggingClass: "dragging",
          onDrag: function() {
            //trigger a resize event, so width dependent stuff will be updated
            $(window).trigger('resize');
          }
        });
      });
    }
  };
})

并在 table

中使用它

<table id="tblbody"  col-resizeable >

但我在控制台中收到这样的错误

elem.colResizable is not a function

<head>
     <script src="src/scripts/lib/less/colResizeable.js"></script>
</head>

我也在 head 标签中添加了可调整大小的插件

Answer 1

请务必在 AngularJS 框架之前 加载 jQuery 库。

来自文档：

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to AngularJS's built-in subset of jQuery, called "jQuery lite" or jqLite.

To use jQuery, simply ensure it is loaded before the angular.js file.

— AngularJS angular.element API Reference

elem.colResizable 不是函数

elem.colResizable is not a function

html

jquery

resize

html-table

angularjs