如何从指令链接方法中调用js插件-Angular.js

Question

我正在尝试将Bootstrap 3的模式包装在Angular指令中。 我进入了链接功能，但是无法调用Bootstrap .modal()函数。 这是我的html：

<h1>This is a test!!!</h1>
<button ng-click="test()">This is a button</button>

<div id="myModal" class="modal fade" bsmodal>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这是我的指令：

App.directive('bsmodal', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.modal('show');
    }
  };
});

当我到达element.modal('show') ，出现错误TypeError: Object #<Object> has no method 'modal' 。 element对象看起来像是jQuery包装的对象，但是它仍然没有方法。 我不了解的部分是我可以在链接函数中调用$('myModal').modal() ，并且一切正常，应该可以正常工作。

所以我的问题是

1. element和jQuery包装的对象有什么区别？ （它们看起来一样）
2. 如何在链接函数内部的element上调用modal()函数？

Answer 1

Angular使用的是jQuery的简化版本jqLite ，它支持jQuery提供的功能的子集 。

看来您仍在页面中加载jQuery。 如果您在 angular 之前加载它，angular将使用它而不是jqLite ，您应该能够调用element.modal('show') 。