javascript - load script in a page in angular application -
in angular application, there html templates loaded using directives , thoses templates contain scripts. want separate scripts , load templates when templates loaded. can using separate directives? or there way load script when loading templates using directives?
please suggest me
<div> <div class="rs-textarea"> <textarea id="summernote" class="inserttext"></textarea> <script> $('#summernote').summernote({ focus: true, // set focus editable area after initializing summernote height: 150, toolbar: [ ['fontsize', ['fontsize']], ['style', ['bold', 'italic', 'underline', 'clear']], // ['fontname', ['fontname']], ['para', ['ul', 'ol', 'paragraph']], ['insert', ['link', 'hr']], ['table', ['table']], ['view', ['codeview']], ] }); </script> <div class="rb-option"> <div class="option-icon ico-drag icon ion-arrow-move"></div> <div class="option-icon ico-settings icon ion-android-close deletesnippet"></div> </div> <!-- delete snippet --> <script> $('.deletesnippet').on('click', function () { $(this).parent().parent().fadeout(300); }) </script> </div> </div> instead of this, want have text.html , text.js separately. text.html>>
<div class="rs-textarea"> <textarea id="summernote" class="inserttext"></textarea> <div class="rb-option"> <div class="option-icon ico-drag icon ion-arrow-move"></div> <div class="option-icon ico-settings icon ion-android-close deletesnippet"></div> </div> </div> text.js>>
<script> $('#summernote').summernote({ focus: true, height: 150, toolbar: [ ['fontsize', ['fontsize']], ['style', ['bold', 'italic', 'underline', 'clear']], // ['fontname', ['fontname']], ['para', ['ul', 'ol', 'paragraph']], ['insert', ['link', 'hr']], ['table', ['table']], ['view', ['codeview']], ] }); </script> <!-- delete snippet --> <script> $('.deletesnippet').on('click', function () { $(this).parent().parent().fadeout(300); }) </script> here directive loading text.html
.directive('drtext', function (){ return { restrict: "ea", templateurl: "app/webapp/templates/snippets/text.html", replace: true, scope: { list: "=" } } })
that's link property there for:
.directive('drtext', function (){ return { restrict: "ea", templateurl: "app/webapp/templates/snippets/text.html", replace: true, scope: { list: "=" }, link: function($scope, $element) { $element.find('textarea').summernote({...}); // delete handlers etc. } } }) by way: in case intend add multiple <dr-text> elements, should not use id attribute on <textarea> id should unique page.
Comments
Post a Comment