AngularJS manipulate DOM with JQuery after HTML rendering

Question

I try to run JQuery after dom rendering. Here is the code:

angular.module('testCtrl', ['testService'])

.controller('testController', ['$scope', '$timeout', 'Test', function($scope,$timeout, Test) {
    var vm = this;
        Test.getFromServer().success(function(data) {
            vm.result = data;
            vm.processing = false;
     });
}]);

<test ng-controller="testController as test" >
<note id="note">{{test.result}}</note>

The "getFromServer" function is an asynchronous call to the server that retrieve some HTML.

I want to manipulate this html with JQuery.

What should I use ? directive ? $watch ? $broadcast ?

Could you please give me a running example ?

possible duplicate? http://stackoverflow.com/questions/15744630/whats-the-correct-way-to-trigger-jquery-dom-manipulation-from-within-a-controll — Ben Diamant, Feb 13 '15 at 15:26

score 0 · Answer 1 · answered Feb 13 '15 at 15:38

It is standard to manipulate the DOM in directives only. What you could do is write the whole thing as a directive.

function testDirective(Test){
   return {
     controller: 'testController as test',
     link: function(scope, attr, elem, test){
        Test.getFromServer().success(function(data) {
           test.result = data;
           test.processing = false;
        });
     }
   }
}

<div test-directive>
    <note id="note">{{test.result}}</note>
</div>

AngularJS manipulate DOM with JQuery after HTML rendering

1 Answers1