tinymce指令使我的页面刷新

Question

我有一个带标签的弹出窗口。我在弹出窗口中使用了tabs和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>

有谁知道为什么会这样？