We are making a new project using angular. The project was first designed using bootstrap and jquery. Now we evoluted to AngularJS instead of just php and jquery. But almost every plugin in jQuery doesn't work with angular, this is what is happening to me with Summernote.
I tryed to copy the init inside the index, and inside the pages, but it doesn't work. Tried many things but it still not working.
What I'm doing: Here are my js links in my main 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>
Then I tryed to call it this way,
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
}); });
What am I doing wrong?, I don't know how to use the angular version, or how to integrate this.
Any clue or help will be graet.
According to Summernote documentation, the plugin requires jquery and bootstrap. I do not see these in the code that you provided. While AngularJS, ships with a really trimmed down version of JQuery, that works for basic DOM selection and manipulation, it's not enough for JQuery plugins like Summernote, that require the full library.
<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>
Additionally, you will want to load your AngularJS application code (e.g., app conf, controllers, directives, services, routes, etc...), in the body of your index.html file. This will ensure that the required libraries have been loaded before angular uses them.
<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>
Once, you have got the libraries loading correctly, in order to actually use the JQuery plugins, I recommend wrapping them in Angular directives. This will package all of the required code into an easy to use, and neatly scoped html component.
I have setup a REALLY basic plunk demonstrating a very simple scenario in which you have a navigation link. The link (i.e. screen 1) loads a new view that contains a simple summernote directive called (summerNote).
Typically you will also want to add some isolated scope parameters so that you can set the required jquery plugin options using HTML element attributes in your view.
// 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"
})