jQuery plugins not detected inside angular ng-template

Question

I have a summernote and chosen plugin which is triggered via jQuery:

$('.init-summernote').summernote({
  width: 420,
  toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['para', ['ul', 'ol', 'paragraph']]
  ]
});

$(".chosen-select").chosen({width: "100%"});

I am just using jquery to render those plugin but I use angularjs primarily in my scripts. My problem is that when inside ng-template those plugins can't be read?

<div>
<script type="text/ng-template" id="myModalContentSoftSkills.html">
    <div class="modal-header">
        <h3 class="modal-title">Edit Personal Soft Skills</h3>
    </div>
    <div class="modal-body">
      <textarea id="additional_comment" class="form-control init-summernote" rows="7" ng-model="items.personal_soft_skills">
      </textarea>

    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="">Save</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>
</div>

That is my modal. But when outside <script type="text/ng-template .. everything works fine on my other form which is not in modal.

This is how I render modal

$scope.openSoftSkillsModal = function(size) {
    console.log("Click");
    var modalInstanceTasks = $modal.open({
      templateUrl: 'myModalContentSoftSkills.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstanceTasks.result.then(function (data) {
      $scope.items = data;
    }, function () {

      console.log('Modal dismissed at: ' + new Date());
    });
  };

Is there a workwround on it? I am thinking of just putting the modal template in a separate folder but problem is I am using Zend in my backend and putting that template file outside requires me to add stuff in my controller which I don't want to do. Is there any alternative?

Answer 1

Always use a directive to initialize jQuery plugins.

The element is exposed in directive as jQuery object as long as jQuery is loaded in page before angular and code will only fire when element actually exists

Simple exaample

<div summer-note></div>

JS

angular.module('myApp').directive('summerNote', function() {
  return {
    link: function(scope, elem) {
      elem.summernote({ /* options */ })
    }
  }
});

You should also check if there aren't already modules vailable for these plugins so you don't have to re-invent the wheel especially with plugin events as well as being able to create config in angular scope