ng-ckeditor problem with ui-router

[chatorn-ketsom]

Hi, First of all please forgive my english :)

I am now working on a project where angular ui-router is used for page navigation(state stuff). Recently I decided to use ckeditor as well as the ng-ckeditor for a module to support user input with style and layout customisation. The problem I found was that when changing from a state ,say, create-item,which conresponds to a view containing ckeditor in it, to another state,say, edit-item, which also contains ckeditor, the create-item view was not properly removed/cleared from the page and the edit-item view was prepended on top of the create-item view resulting in 2 undesired ui-view elements in the page as the following snippet:

The one with attribute data-ng-animate on it was of create-item view that was supposed to be gone when the render was completed.

Also each view uses its own controllers as follows:

app.controller('ItemCreationCtrl', ['$scope','$state',function($scope, $state){ ... $state.go('edit-item', {itemId: id, fromCreate: true}); ... }]).controller('ItemUpdateCtrl', ['$scope','$stateParams',function($scope, $stateParams){ ... $scope.itemId = $stateParams.itemId; ... }]);

I have no idea how to fix this since I'm quite an ordinary user of javascript let alone angularjs and besides there was no error loged in firebug console for this problem.

Im not sure if it's the problem of ui-router, ngAnimate or ckeditor or maybe myself :( Please help me out, any advice is appreciated. Thank you.

[chatorn-ketsom]

Besides, when i tried removing ckeditor directive(attribute) from the textarea, everything was working fine. I also noticed that when adding the ckeditor directive to the textarea element, angular takes more time to render the page. im not sure if it has anything to do with the problem.

Thank you.

[chatorn-ketsom]

the following snippet is the current state configuration:

$stateProvider.state('create-item',{ url: '/item/new', controller:'ItemCreationCtrl', templateUrl: modulePath + 'items/views/itemCreate.html' }).state('edit-item',{ url: '/item/edit', controller:'ItemUpdateCtrl', params: {itemId: null, fromCreate: false}, templateUrl: modulePath + 'items/views/itemEdit.html'
}) ..... ... Thank you

[amitparrikar]

Hi, Any luck in resolving this issue, I am kind of stuck with similar issue.

[chatorn-ketsom]

Hi amitparrikar,

I did add the following CSS as a daring workaround.

div[ui-view]:nth-child(n+2) { display: none; }

Hope this helps and don't judge me. hahaha

[amitparrikar]

Thanks for the help @smilingGithub However my issue was related to router, but not exactly like yours. The problem with my case was CKEDITOR instance was still living even after moving to some other route. So the solution to this problem was Destroy the instance manually.

$scope.$on('$destroy', function () {
      return window.CKEDITOR.instances && window.CKEDITOR.instances['EDITOR_TEXTAREA_ELEMENT_ID'] && window.CKEDITOR.instances['EDITOR_TEXTAREA_ELEMENT_ID'].destroy();
    });