無法使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。

來源

2016-05-14 Abiel Muren

你必須添加之前參考angularjs的jQuery的腳本參考 –

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

Here's the Plunk

來源

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

無法使jQuery Summernote與angularJS一起工作，它根本不顯示

回答

相關問題