Question

我们正在使用jquery 1.9.1和angular 1.2.13。我们正在使用一个非常好的wysiwyg编辑器，我们将html保存到数据库中并使用jquery append函数加载html并且工作正常。现在我们尝试将相同的html附加到div标签（wysiwyg编辑器也使用div）和它不起作用的追加功能。我们检查控制台，我们试图追加的字符串就在那里，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();
    }]);

Answer 1

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

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

并在模板中执行此操作：

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

Answer 2

使用angularjs为ng-bind-html解决它需要包含

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

并添加＆＃39; ngSanitize＆＃39;作为app模块配置中的依赖项。然后就做@Johannes Reuter发布的内容。谢谢大家，问候。

Jquery append（）不使用angularjs

2 个答案: