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

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -