AngularJS 内联编辑插入 HTML 标签

Question

我希望能够在AngularJS中创建一个内联可编辑的内容，同时也可以插入格式化的HTML标签。

我已经创建了一个plunker：http://plnkr.co/edit/cHgr6BxzoT3LWhc35kmX?p=preview 但是当我尝试插入一些HTML标签时，比如：

<b>test</b>

我希望看到粗体文本，但它只显示纯文本而不是html...

[编辑]

可能我不能很好地解释我想要的。我想创建一个简单的HTML编辑器，可以修改文本并添加链接、粗体文本、标题标签等...只需编写HTML标记并在页面上编译即可。

如果我想从我的控制器输出文本，则答案是正确的，但我想使其可编辑。

- Tropicalista

---

尝试使用ngBindHtmlUnsafe，请参考http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe。 - Idrees Khan

我已更新我的 Plunker：似乎无法正常工作... - Tropicalista

尝试使用以下代码更新：$scope.name = '<b>World</b>'; - Idrees Khan

请回复我，这样我就可以发布答案了。 - Idrees Khan

我已经尝试过......但我想让可编辑内容生成新的HTML标签以显示格式化文本。 - Tropicalista

Answer 1

如果您更新指令的元素焦点/失焦，就可以实现您想要的效果。

但是当您进行编辑时，它会切换回“HTML编辑模式”。

  element.bind("focus", function(){
    scope.name = scope.name.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    scope.$apply();
  })
  element.bind("blur", function() {
    scope.name = element[0].innerHTML.replace(/[&]lt[;]/g, "<").replace(/[&]gt[;]/g, ">");
    scope.$apply();
  });

更新的Plunkr: http://plnkr.co/edit/cfSBctBbK6cpwfKrwwWf?p=preview

- Mathew Berg

Answer 2

这个问题有一个指令可以解决。不要使用ng-bind，而是使用ng-bind-html-unsafe。然后你就可以将字面上的HTML传递给你的模型，像这样：

$scope.name = '<b>世界</b>';

- Boris Bucha

---

从您的Plunkr中，我可以看到您不仅想要绑定模型，而且还想将其包装到带有contenteditable的指令中。在这种情况下，请查看$compile()函数[http://docs.angularjs.org/api/ng.$compile]在指令中的link()函数中，您必须在模板HTML上调用它，以便您的绑定表达式变得“活跃”。 - Boris Bucha

或者你可以直接在指令定义中使用"template"属性，而不是link()函数。如果你将你的HTML代码放在"template"中，它会自动编译。然后你还需要使用"scope"指令属性来绑定你的作用域属性，例如scope: {name: '='}。 - Boris Bucha

Answer 3

您应该使用或借鉴自 CodeMirror UI 指令，来自 AngularUI。

这里有一个可工作的 Plunker，但依赖关系不好。

- Caio Cunha