Jquery append() 不适用于 angularjs答案

【问题标题】：Jquery append() not working with angularjsJquery append() 不适用于 angularjs
【发布时间】：2015-01-13 16:33:30
【问题描述】：

我们正在使用 jquery 1.9.1 和 angular 1.2.13。我们正在使用一个运行良好的所见即所得编辑器，我们将 html 保存到数据库中并使用 jquery append 函数将 html 加载回来并且工作正常。现在我们正在尝试将相同的 html 附加到 div 标签中（所见即所得的编辑器也使用 div）并且 append 函数不起作用。我们在控制台中检查，我们尝试附加的字符串在那里，jquery 也抓取了元素（也在控制台日志中检查）但附加功能不起作用。

PD：我为我的英语道歉

html

<div data-ng-controller="PreviewCtrl">
    <div class="container">
      <div id="resumenPreview"></div>                                
    </div>
</div>

控制器

angular.module('module').controller('PreviewCtrl', ['$scope', '$routeParams', '$location', '$http', 'selectedElement',
    function ($scope, $routeParams, $location, $http, selectedElement) {

        $scope.id = $routeParams.id;
        $scope.mensaje = $scope.id;        
        $scope.imagen = null;
        $scope.dataImagen = null;

        //is not working either
        $('#resumenPreview').append("hola");   

        $scope.pageLoad = function () {            
            var x = selectedElement.data.Resumen;
            //This is properly displayed in the console
            console.log(x);
            //This too, is displayed in the console log
            console.log($('#resumenPreview'));
            // Why this isn't working? I'am clueless
            $('#resumenPreview').append(x);
        };

        $scope.pageLoad();
    }]);

【问题讨论】：

这不是使用 Angular 的正确方法。你为什么要把 jQuery 和它混在一起？角度控制器中不应该进行任何 DOM 操作
你试过var x = $.parseHTML(selectedElement.data.Resumen)吗？
请看stackoverflow.com/questions/14994391/… stat.
是的，我们现在的问题是所见即所得的编辑器，如果我们尝试使用 ng-model 加载 html，编辑器会将 html 呈现为字符串，并且无法正确显示文本
您需要一个编辑器指令将编辑器内容绑定到模型

标签： javascript jquery html angularjs

【解决方案1】：

我的猜测是有多个 id="resumenPreview" 的 div。但这显然是以角度处理此类事情的错误方法。控制器中不应该有 dom 操作 - 指令应该处理与 dom 相关的东西。将 html-string 放入作用域，让 angular 处理注入到 dom 中：

用$scope.resumenPreview = x;代替$('#resumenPreview').append(x);

在模板中这样做：

<div class="container">
      <div ng-bind-html="resumenPreview"></div>                                
</div>

【讨论】：

我这样做了，并在我的控制器中添加了这个 $scope.resumenPreview = "
hola
";，没用

【解决方案2】：

使用 angularjs 解决它，以便 ng-bind-html 工作它必须包含

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>

并在应用模块配置中添加“ngSanitize”作为依赖项。然后做@Johannes Reuter 发布的内容。谢谢大家，您好。

【讨论】：