I am in the process of creating an html object and passing it into the view. In the code snippet provided below, I have found that using the function from the factory directly in the controller works perfectly fine. However, I need to reuse this function multiple times within my application to avoid redundancy. As a newbie to Angular, I find myself stuck at this point.
factory:
angular.module('mainApp').factory('RichEditorControl', function () {
function createRichEdit(richEditContainer) {
var options = DevExpress.RichEdit.createOptions();
options.height = '1000px';
customizeRibbon(options);
options.confirmOnLosingChanges.enabled = false;
var elem = document.createElement('div');
richEditContainer.append(elem);
var rich = DevExpress.RichEdit.create(elem, options);
window.rich = rich;
return rich;
}
function customizeRibbon(options) {
// options.ribbon.removeTab(DevExpress.RichEdit.RibbonTabType.MailMerge);
options.ribbon.removeTab(DevExpress.RichEdit.RibbonTabType.References);
options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.File)
.removeItem(DevExpress.RichEdit.FileTabItemId.OpenDocument);
options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.View)
.removeItem(DevExpress.RichEdit.ViewTabItemId.ToggleShowHorizontalRuler);
}
})
Controller:
app.controller('AppCtrl',
[
'$scope', '$http', '$timeout', '$log', '$q', '$location', 'RichEditorControl', function ($scope, $http, $timeout, $log, $q, $location, RichEditorControl) {
RichEditorControl.createRichEdit($(angular.element('#rich-container')));
}
]);
View:
<div class="col-md-12">
<div style="height: 1024px;" id="rich-container"></div>
</div>