javascript - Manipulating DOM with AngularJS -

im trying manipulate table angularjs using directives.

i want add new class first td id=2 this:

gameapp.directive('mapactivity', function() {     return {         link: function(scope, element, attrs) {             angular.element('.click#1').addclass('dotted');         }     }; }); 

im trying "use" drictive here:

<map-activity> <table ng-bind-html="safehtml()"> </table> </map-activity> 

but nothing happens. first td not class 'dotted'. do wrong?

here controller:

var gameapp = angular.module("gameapp", ['ngroute','ngsanitize']);  gameapp.service('link', function() {     this.user = false; }); gameapp.filter('unsafe', function($sce) {     return function(val) {         return $sce.trustashtml(val);     }; });  gameapp.directive('mapactivity', function() {     return {         priority: 1,         restrict: 'a',         link: function(scope, element, attrs) {             angular.element('.click#1').addclass('dotted');         }     }; }); function maketablefrom(str) {     var k = 1;     result = "";      for(var = 1; <= 8; i++) {         result += '<tr>';          for(var j = 1; j <= 20; j++) {             if(str[k] == '#') {                 result += '<td id=' + k + '">#</td>';             }             else if(str[k] == '&') {                 result += '<td class="click" val="water" id="' + k + '">&</td>';             }             else {                 result += '<td class="click" id="' + k + '"><a href="#"></a></td>';             }              k++;         }         result += '</tr>';     }     return result; }   gameapp.config(function($routeprovider) {     $routeprovider      .when('/', {             templateurl : 'partials/firstpage.html',             controller  : 'firstpagectrl'     })      .when('/game', {             templateurl : 'partials/game.html',             controller  : 'gamectrl'     });  });  gameapp.controller("firstpagectrl", function($scope,$http,link,$location) {     $scope.dologin = function() {         $http.post("lib/action.php", {username: $scope.username, password: $scope.password}).success(function(data) {             if(data) {                 link.user = data;                 console.log(link.user);                 $location.path("/game");             }         }).error(function(data) {             console.log(data);         });     }; });   gameapp.controller("gamectrl", function($scope,$http,link,$location,$sce) {     //$scope.trr = [1,2,3,4,5,6,7,8];     //$scope.tdd = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];     $scope.getmonsters = "1";     var map;      $http.post("lib/action.php", {monsters: $scope.getmonsters}).success(function(data) {         map = data;         console.log(map);         $scope.result = maketablefrom(data);         console.log($scope.result);     });      $scope.safehtml = function() {         return $sce.trustashtml($scope.result);     };     if(link.user) {         /*$scope.message = "fisk";         console.log(link.user);*/     } else {         /*$scope.message = "ledsen fisk";         console.log("Är inte satt");*/     }  }); 

as can see, im using javascript function assaign variable witht html, , using in view, passing through filter.

when hit ctrl+u view source of page, can't see td's , tr's being printed out. can affect why it's not working?

try assigning different priority map-activity directive, process after ng-bind-html

and both @abhishek jain , @dalorzo pointed out , directive has attribute applied same dom element

.directive('mapactivity', function() {     return {        priority: 0,   // check priority ng-bind-html have , set more that.        link: function(scope, element, attrs) {           ...        }     } }) 

priority

when there multiple directives defined on single dom element, necessary specify order in directives applied. priority used sort directives before compile functions called. priority defined number. directives greater numerical priority compiled first. pre-link functions run in priority order, post-link functions run in reverse order. order of directives same priority undefined. default priority 0.