无法使jQuery Summernote与angularJS一起工作，它根本不显示
问题描述：
我们正在使用angular制作一个新项目。该项目首先使用bootstrap和jquery进行设计。现在我们演变为AngularJS，而不仅仅是php和jquery。但几乎jQuery中的每个插件都无法使用angular，这是Summernote发生的事情。无法使jQuery Summernote与angularJS一起工作，它根本不显示
我尝试复制索引内，并在页面内，但它不起作用。尝试了很多东西，但仍然无法正常工作。
我在做什么：这里是我的JS在我的主模板链接：
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="framework/js/bootstrap.min.js"></script>
<script src="libs/jquery-validate/jquery.validate.min.js"></script>
<!-- Angularjs first, then directives and angularJS app. -->
<script src="https://code.angularjs.org/1.3.18/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.18/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.3.18/angular-cookies.min.js"></script>
<script src="libs/angularjs-ui-router/angular-ui-router.min.js"></script>
<script src="libs/angularjs-validate/angular-validate.min.js"></script>
<script src="app/js/protected.js"></script>
<script src="app/js/service.js"></script>
<script src="app/js/app.js"></script>
<!-- Script and Setups for all pages -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/main.js"></script>
<!-- Assets and libraries -->
<!--summernote-->
<script src="assets/summernote/dist/summernote.min.js"></script>
<script src="assets/summernote/dist/lang/summernote-es-ES.js"></script>
<!-- Match Height -->
<script src="assets/jquery-matchheight/jquery.matchheight.js"></script>
然后我tryed调用它这样，
jQuery(document).ready(function() {
$('.summernote').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: false // set focus to editable area after initializing summernote
}); });
我在做什么错？，我不知道如何使用角度版本，或者如何整合这个。
任何线索或帮助将graet。
答
根据Summernote文档，该插件需要jquery和bootstrap。我没有在你提供的代码中看到这些。虽然AngularJS带有一个非常精简的JQuery版本，可用于基本的DOM选择和操作，但对于需要完整库的Summernote等JQuery插件来说还不够。
<head>
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<!-- Angular libraries -->
<script data-require="[email protected]" data-semver="1.4.8" src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="[email protected]" data-semver="1.4.8" src="http://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
此外，你将要加载您AngularJS应用程序代码（例如，应用程序的conf，控制器，指令，服务，航线，等...），在您的index.html文件的主体。这将确保在angular使用它们之前已经加载了所需的库。
<body>
<h1>Hello Plunker!</h1>
<a href="#screen1">Screen 1</a>
<a href="#screen2">Screen 2</a>
<div ng-view></div>
<script src="script.js"></script>
</body>
有一次，您已经正确加载了库，为了实际使用JQuery插件，我建议将它们包装在Angular指令中。这将把所有必需的代码打包成一个易于使用的，整洁的html组件。
我已经设置了一个非常简单的方法来展示一个非常简单的场景，其中有一个导航链接。链接（即屏幕1）加载一个新视图，其中包含一个名为（summerNote）的简单summernote指令。
通常，您还需要添加一些独立的范围参数，以便您可以在视图中使用HTML元素属性设置所需的jquery插件选项。
// The simple directive
app.directive("summerNote", function(){
return {
link: function (scope, el, attr) {
el.summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: false // set focus to editable area after initializing summernote
});
}
};
});
// Screen 1 route with simple view that uses the summer-note directive
$routeProvider.when("/screen1", {
template: "<h3>{{message}}</h3><summer-note></summer-note>",
controller: "screenOneController"
})
你必须添加之前参考angularjs的jQuery的脚本参考 –