Jquery append() not working with angularjs

Question

We are working with jquery 1.9.1 and angular 1.2.13. We are using a wysiwyg editor that works great, we save the html into the database and load the html back using jquery append function and works fine. Now we are trying to append the same html into a div tag (the wysiwyg editor also uses a div) and the append function it's not working. We check in the console, and the string we are trying to append is there, also jquery grabs the element (also checked in the console log) but the append function it's not working.

PD: I apologize for my english

The html

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

The controller

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();
    }]);

This is not the proper way to work with angular. Why are you mixing jQuery with it? There should never be any DOM manipulation done in angular controller — charlietfl, Jan 13 '15 at 16:37
have you tried `var x = $.parseHTML(selectedElement.data.Resumen)`? — scniro, Jan 13 '15 at 16:38
Please see http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background stat. — isherwood, Jan 13 '15 at 16:39
Yes we now the problem is the wysiwyg editor, if we try to load the html using ng-model the editor render the html like a string and do not display the text properly — Enrique González, Jan 13 '15 at 16:41
You need a directive for the editor to bind the editor content to the model — charlietfl, Jan 13 '15 at 16:42
sal niro, it's not the selectedElement.data.Resumen I also tried simply $('#resumenPreview').append("hello"); and didn't work — Enrique González, Jan 13 '15 at 16:43

score 0 · Answer 1 · answered Jan 13 '15 at 16:41

My guess would be there are multiple divs with id="resumenPreview". But this is clearly the wrong way to handle such things in angular. There shouldn't be dom-manipulation in the controller - directives should take care of dom-related stuff. Put the html-string into the scope and let angular handle the injection into the dom:

instead of $('#resumenPreview').append(x); do $scope.resumenPreview = x;

and in the template do this:

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

I did that and added this in my controller $scope.resumenPreview = "
hola
";, didn't work — Enrique González, Jan 13 '15 at 16:53

score 0 · Accepted Answer · answered Jan 13 '15 at 20:44

Solve it with angularjs for the ng-bind-html to work it's necessary to include

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

and to add 'ngSanitize' as a dependency in the app module configuration. And then just do what @Johannes Reuter posted. Thanks everybody, Greetings.

Jquery append() not working with angularjs

2 Answers2