rich text with non editable content, angularjs

Viewed 1509

I use directive textAngular to format my email notification text and stuck for while with task when I need to add non editable html inside rich text. I added my custom directive over textAngular directive. With help my custom directive I replace special characters in the string to html span tags with param contenteditable='false', but this param doesn't work and content still editable.

In this case I have two questions:

  1. How can I setup non-editable html inside content textAngular directive?
  2. How can I concat my variable to the string to desire place (currently it always concats to the end of the string)

I appreciate any help.

Plunker with my problem

My custom directive:

app.directive('removeMarkers', function () {

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

       element.bind('click', function (e) {
                var target = e.target;
                var parent = target.parentElement;
                if (parent.classList.contains('label-danger')){
                    parent.remove()
                }
            });

        function changeView(modelValue){
            modelValue= modelValue
                .replace(/\{{/g, "<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 14px;'>")
                .replace(/\}}/g, "<span contenteditable='false' class='remove-tag fa fa-times'></span></span>&nbsp;");
            ngModel.$modelValue= modelValue;

            console.log(ngModel)
            return modelValue;
        }
        ngModel.$formatters.push(changeView);
        }
    }
});

Html

  <select class="form-control pull-right"
                style="max-width: 250px"
                ng-options="label.name as label.label for label in variables"
                ng-change="selectedEmailVariables(variable)"
                ng-model="variable">
            <option value="">template variables</option>
   </select>

  <div text-angular remove-markers name="email" ng-model="data.notifiation"></div>
1 Answers
Related