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

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. 如何调用 modal() element 上的函数在链接函数内？

Answer 1

Angular 使用 jQuery 的简化版本，jqLit​​e supports a subset of the functions offered by jQuery .

看起来您正在页面中加载 jQuery。如果您在 Angular 之前加载它，Angular 将使用它而不是使用 jqLit​​e 并且您应该能够调用 element.modal('show').