2016-07-11 59 views
0

內沒有檢測到我有一個summernote和所選擇的插件,通過jQuery的觸發:jQuery插件角NG-模板

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

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

我只是用jQuery來呈現那些插件,但我用angularjs主要是在我的腳本。我的問題是,當ng-template裏面的插件無法被讀取?

<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> 

這是我的模態。 但是當外面<script type="text/ng-template ..一切工作正常我的其他形式不是模態。

這是我的渲染模式

$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()); 
    }); 
    }; 

是否有關於它workwround?我正在考慮將模板模板放在一個單獨的文件夾中,但問題是我在後端使用Zend並將該模板文件放在外面,這要求我在我的控制器中添加我不想做的事情。有其他選擇嗎?

回答

0

始終使用指令來初始化jQuery插件。

如jQuery是在頁面加載前角和代碼只會火的時候元素實際上存在

簡單exaample

<div summer-note></div> 

JS

angular.module('myApp').directive('summerNote', function() { 
    return { 
    link: function(scope, elem) { 
     elem.summernote({ /* options */ }) 
    } 
    } 
}); 
元素被指令作爲jQuery的,只要對象公開

您還應該檢查是否還有可用於這些插件的模塊,以便您不必重新發明輪子,特別是使用插件事件s以及能夠在角度範圍內創建配置