Kann jQuery Summernote nicht mit angularJS arbeiten, es zeigt einfach nicht

Wir machen ein neues Projekt mit eckigen. Das Projekt wurde zuerst mit Bootstrap und Jquery entwickelt. Jetzt haben wir AngularJS statt nur PHP und Jquery entwickelt. Aber fast jedes Plugin in jQuery funktioniert nicht mit eckigen, das passiert mir bei Summernote.Kann jQuery Summernote nicht mit angularJS arbeiten, es zeigt einfach nicht

Ich versuchte, die Init innerhalb des Indexes und innerhalb der Seiten zu kopieren, aber es funktioniert nicht. Habe viele Dinge versucht, aber es funktioniert immer noch nicht.

Was ich tue: Hier sind meine js Links in meinem Haupt-Template:

<!-- 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>

Dann tryed ich es auf diese Weise zu nennen,

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

Was mache ich falsch ?, Ich weiß nicht, wie man die eckige Version benutzt oder wie man diese integriert.

Jeder Hinweis oder Hilfe wird graet.

Quelle

2016-05-14 Abiel Muren

Sie müssen Skriptverweis von jquery vor Referenz AngularJS hinzufügen –

Laut der Summernote Dokumentation benötigt das Plugin jquery und bootstrap. Ich sehe diese nicht in dem von Ihnen angegebenen Code. Während AngularJS mit einer wirklich abgespeckten Version von JQuery ausgeliefert wird, die für die einfache DOM-Auswahl und -Manipulation geeignet ist, reicht es nicht für JQuery-Plugins wie Summernote, die die vollständige Bibliothek benötigen.

<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>

Zusätzlich werden Sie Ihre AngularJS Anwendungscode (zum Beispiel app conf, Controller, Richtlinien, Dienstleistungen, Routen, etc ...) zu laden, in den Körper Ihrer Datei index.html. Dadurch wird sichergestellt, dass die erforderlichen Bibliotheken geladen wurden, bevor sie eckig verwendet werden.

<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>

Einmal Sie die Bibliotheken bekommen haben geladen, um richtig, um tatsächlich die JQuery-Plugins zu verwenden, empfehle ich sie in Angular Richtlinien wickeln. Dies wird den gesamten benötigten Code in eine einfach zu verwendende und sauber umgrenzte HTML-Komponente packen.

Ich habe ein wirklich einfaches Plunk eingerichtet, die ein sehr einfaches Szenario demonstriert, in dem Sie eine Navigationsverbindung haben. Die Verknüpfung (d. H. Bildschirm 1) lädt eine neue Ansicht, die eine einfache Sommernotiz-Anweisung enthält (Sommernotiz).

In der Regel möchten Sie auch einige isolierte Bereichsparameter hinzufügen, sodass Sie die erforderlichen jquery-Plugin-Optionen mithilfe von HTML-Elementattributen in Ihrer Ansicht festlegen können.

// 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

Quelle

2016-05-14 08:28:26 10BitDev

Kann jQuery Summernote nicht mit angularJS arbeiten, es zeigt einfach nicht

Antwort

Verwandte Themen