在angularjs光标位置插入CONTENTEDITABLE格格或定制指令 [英] Insert div or custom-directive in contenteditable div at cursor position in angularjs

问题描述

我在我的CONTENTEDITABLE div来插入自定义指令。

I have to insert a custom directive in my contenteditable div.

   /*Editor Div*/
      <div id="edBody"  contenteditable="true"></div>
   /*Insert one custom directive*/
   <a ng-click="insertType('fibtext')">Add Directive</a>

我试过这样：

  <input type="button" value="Insert" ng-click="addHtmlAtCaret('<dc-tags></dc-tags>')">
   /* Directive */
    asignmentApp.directive('dcTags', function() {
       return {
          restrict: 'E',
          template: 'new <b> Value </b>'
       };
    });

请帮助我。小提琴： - http://jsfiddle.net/k2SUJ/1/

Please help me. Fiddle:- http://jsfiddle.net/k2SUJ/1/

下面是一个小提琴演示我试过。

推荐答案

为了对角要知道你的添加元素，做它的魔力，你需要为的 $编译 元素并将其链接到一个范围

In order for Angular to be aware of your added element and do its magic, you need to $compile the element and link it to a scope.

所以你需要一个范围控制器。您还需要替换的onclick 是的 NG-点击 也的 $编译 元素：

So you'll need a controller with a scope. You also need to replace the onclick handlers with ng-click and also $compile the element:

在HTML：

<input type="button" value="..." ng-click="addHtmlAtCaret(...)">

在JS：

app.controller('ctrl', function ($compile, $scope) {
    $scope.addHtmlAtCaret = function (html) {
        document.getElementById('test').focus();
        ...
        var el = document.createElement("div");
        el.innerHTML = html;
        $compile(el)($scope);
        ...
    };
});

---

又见这个 短演示

---

See, also, this short demo.

这篇关于在angularjs光标位置插入CONTENTEDITABLE格格或定制指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！