Question

我们正在使用angular创建一个新项目。该项目最初是使用bootstrap和jquery设计的。现在我们演变为AngularJS，而不仅仅是php和jquery。但几乎jQuery中的每个插件都没有使用角度，这就是Summernote发生的事情。

我尝试在索引内部和页面内部复制init，但它不起作用。试了很多东西，但它仍然没有用。

我在做什么：以下是我主模板中的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
    }); });

我做错了什么？，我不知道如何使用角度版本，或者如何整合它。

任何线索或帮助都将获得批准。

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文件的正文中加载AngularJS应用程序代码（例如，应用程序配置，控制器，指令，服务，路由等）。这将确保在角度使用之前已加载所需的库。

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

Here's the Plunk

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

1 个答案: