AngularJs内联编辑插入html标签

Question

我想在angularJs中创建一个内联可编辑的内容，可以插入格式化的html标签。

我已经创建了一个活塞:http://plnkr.co/edit/cHgr6BxzoT3LWhc35kmX?p=preview

但是当我尝试插入一些html标签时例如:

<b>test</b>

我想看到一个粗体文本，但它只显示纯文本，而不是html…

[编辑]

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

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

Answer 1

如果你为你的指令更新你的元素focus/blur，你可以实现你想要的。

当你编辑它的时候，我让它切换回"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

Answer 2

这是一个指令。不要使用ng-bind，而要使用ng-bind-html-unsafe。然后你可以像这样传递给你的模型文字html:

$scope.name = '<b>World</b>';

Answer 3

你应该使用CodeMirror UI指令，或者从AngularUI中启发自己。

在这里做了一个工作的Plunker，但是依赖关系不是很好