タブ付きのポップアップがあります。そのポップアップでタブと tinymce ディレクティブを使用しました。
tinymce ディレクティブを使用すると、タブをクリックするたびに小さな mce ディレクティブを追加すると、ページ全体が更新され、タブは正常に動作します。コードに tinymce ライブラリを含めました。
// tinymce directive
app.directive('tinymce', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.tinymce({
// Location of TinyMCE script
script_url: 'js/assets/tiny_mce.js',
// General options
theme: "advanced",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code",
theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Change from local directive scope -> "parent" scope
// Update Textarea and Trigger change event
// you can also use handle_event_callback which fires more often
onchange_callback: function(e) {
if (this.isDirty()) {
this.save();
// tinymce inserts the value back to the textarea element, so we get the val from element (work's only for textareas)
ngModel.$setViewValue(element.val());
scope.$apply();
return true;
}
}
});
}
};
});
// tabs and panes directive
app.directive('tabsx', function() {
return {
restrict: 'E',
transclude: true,
controller: function($scope) {
$scope.panes = new Array();
//var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach($scope.panes, function(pane1) {
pane1.selected = false;
});
pane.selected = true;
};
this.addPane = function(pane) {
if ($scope.panes.length == 0) $scope.select(pane);
$scope.panes.push(pane);
};
},
template:
'<div class="tabbable tabs-left prime-tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a class="prime-tabs" href="" ng-click="select(pane)">{{pane.title}}</a>' +
'</li>' +
'</ul>' +
'<div class="tab-content prime-tab-content" ng-transclude></div>' +
'</div>',
replace: true
};
}).directive('panex', function() {
return {
require: '^tabsx',
restrict: 'E',
transclude: true,
scope: { title: '@'},
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<div class="tab-pane prime-panes" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};
});
\\ html code
<tabsx>
<panex title="Settings">
<form name="myForm">
<label>Title : </label>
<textarea style="resize: none;" name="myTitle" ng-model="myTitle" value={{getMyTitle()}} ng-required="true" ></textarea>
<label>Content: </label>
<textarea tinymce ng-model="myContent" ng-required="true" >{{getMyContent()}}</textarea>
<!-- {{getMyContent()}} -->
<div class="popup-input-set">
<div class="popup-labels">Priority:</div>
<div class="popup-input">
<select ng-model="myPriority" ng-options="priority for priority in myPriorities" style="width:100px;" ng-required="true"></select>
</div>
</div>
<div class="popup-input-set">
<div class="popup-labels">Due Date</div>
<div class="popup-input">
<input ui-date-format ui-date="dateOptions" ng-model="myDueDate" placeholder="Due date" style="width:75px;height:25px;" value={{getMyDueDate()}} ng-required="true"></input>
</div>
</div>
<div class="popup-input-set">
<div class="popup-labels">Effort</div>
<div class="popup-input">
<input type="text" ng-model="myEffort" placeholder="effort" style="width:75px;" value={{getMyEffort()}} ng-required="true">
</div>
</div>
<div class="popup-input-set">
<div class="popup-labels"></div>
<div class="popup-input">
<br/>
</div>
</div>
<div style="clear:both;"></div>
<label>Type : </label>
<select ng-model="myType" ng-options="myType for myType in myTypes" ng-required="true"></select>
<br /> <br />
<button class="btn btn-success" ng-click="editNoteDetails(myTitle,myContent,myDueDate,myEffort)" modal-close="myModalNoTemplate" >Save</button>
<button type="reset" class="btn btn-success" modal-close="myModalNoTemplate">Cancel</button>
</form>
</panex>
</tabsx>
なぜこれが起こっているのか誰にも分かりますか？