我正在尝试将 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">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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
上的函数在链接函数内?
最佳答案
Angular 使用 jQuery
的简化版本,jqLite
supports a subset of the functions offered by jQuery .
看起来您正在页面中加载 jQuery。如果您在 Angular 之前加载它,Angular 将使用它而不是使用 jqLite
并且您应该能够调用 element.modal('show')
.
关于javascript - 如何从指令链接方法中调用 js 插件 - Angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20275813/