Question

我试图在Angular指令中包装Bootstrap 3的模态。我进入了链接功能，但我无法调用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()，一切都可以正常工作。

所以我的问题是

element和jQuery包装对象有什么区别？（他们看起来一样）
如何调用链接功能中modal()上的element功能？

Answer 1

Angular使用缩放版jQuery，jqLite supports a subset of the functions offered by jQuery。

看起来你在页面中加载了jQuery。如果您在之前加载它，则angular会使用它而不是使用jqLite，您应该可以调用element.modal('show')。

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

1 个答案: