AngularJS navigation does not work after tinymce directive

I have a problem, I can’t understand, but I have a hint. Before TinyMCE integration, the main navigation worked fine, for example, the "Settings", "Analytics", "Settings" links; it doesn’t work now if you click on them.

Here is my js file:

var app_htmleditor_module = angular.module('app_htmleditor', ['components']).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: getBaseURL()+'public/tpl/app/htmleditor.htm',   controller: HtmlEditorCtrl, reloadOnSearch:false }).
            otherwise( {redirectTo: '/'});
    }
]);

angular.module('components', []).directive('imageUpload', function () {
    return {
        restrict: 'E',
        scope: {
              uploaderid:'@uploaderid'
            },
        templateUrl: '/public/tpl/imageupload.htm'
    }
});

app_htmleditor_module.directive('uiTinymce', function() {
     return {

         require: 'ngModel',
         link: function(scope, element, attrs, ngModel) {

             element.tinymce({
                 // Location of TinyMCE script
                 script_url: 'http://resources.holycrap.ws/jscripts/tiny_mce/tiny_mce.js',

                 // General options
                 theme: "simple",

                 // 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 only for textareas)
                         //ngModel.$setViewValue(e.getBody().innerHTML);
                         ngModel.$setViewValue(element.val());
                         scope.$apply();

                         return true;
                     }
                 }
             });

         }
     }
});

And I added the above tinymce directives in textarea, using ui:tinymceas follows:

<textarea ui:tinymce ng-model="data.html_tab" id="{{fileUploaderID}}_html_tab" name="{{fileUploaderID}}_html_tab" style="width:600px; height:300px"></textarea>

Pay attention to the ui:tinymceabove. If I remove this, the navigation system will start working fine again. So, how do I make navigation using the help ui:tinymceadded to textarea?

DEMO URL:

http://dev-socialapps.rkm-group.com/app/htmleditor/index#/

Any help would be greatly appreciated. Thanks

Update:

, ui js :

<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>

js :

var app_htmleditor_module = angular.module('app_htmleditor', ['components', 'ui']).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: getBaseURL()+'public/tpl/app/htmleditor.htm',
                controller: HtmlEditorCtrl,
                reloadOnSearch:false
            }).
            otherwise( {redirectTo: '/'});
    }
]);

app_htmleditor_module.value('ui.config', {
   tinymce: {
      theme: 'simple'
   }
});

textarea:

<textarea ui-tinymce ng-model="tinymce" id="{{fileUploaderID}}_html_tab" name="{{fileUploaderID}}_html_tab" style="width:600px; height:300px"></textarea>

:

ReferenceError: tinymce is not defined

ui js ,

+5
1

tinymce angular -ui?

JS

+1

All Articles