无法使 jQuery Summernote 与 angularJS 一起使用，它根本不显示

Question

我们正在使用 angular 创建一个新项目。该项目最初是使用 bootstrap 和 jquery 设计的。现在我们进化为 AngularJS，而不仅仅是 php 和 jquery。但是几乎 jQuery 中的每个插件都不适用于 angular，这就是我使用 Summernote 时遇到的情况。

我尝试在索引和页面内复制初始化，但它不起作用。试了很多东西还是不行。

我在做什么：这是我主模板中的 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>

然后我试着这样称呼它，

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
    }); });

我做错了什么？，我不知道如何使用 angular 版本，或者如何集成它。

如有任何线索或帮助，我们将不胜感激。

Answer 1

根据 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="angular.js@1.4.8" data-semver="1.4.8" src="http://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="angular-route@1.4.8" data-semver="1.4.8" src="http://code.angularjs.org/1.4.8/angular-route.js"></script>

    <link rel="stylesheet" href="style.css" />

  </head>

此外，您需要在 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 组件中。

我已经设置了一个非常基本的 plunk，演示了一个非常简单的场景，您可以在其中进行导航 link。 link（即屏幕 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"
  })

Here's the Plunk

无法使 jQuery Summernote 与 angularJS 一起使用，它根本不显示

Can't make jQuery Summernote work with angularJS, it simply doesn't show

jquery

angularjs

summernote