AngularJS로 DOM 조작

지시문을 사용하여 angularjs로 내 테이블을 조작하려고합니다.

다음과 같이 id = 2 인 첫 번째 td에 새 클래스를 추가하고 싶습니다.

gameApp.directive('mapActivity', function() {
    return {
        link: function(scope, element, attrs) {
            angular.element('.click#1').addClass('dotted');
        }
    };
});

여기서 drictive를 "사용"하려고합니다.

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

하지만 아무 일도 일어나지 않습니다. 첫 번째 구축 전차는 '점선'클래스를 얻지 못합니다. 내가 뭘 잘못 했어?

내 컨트롤러는 다음과 같습니다.

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 i = 1; i <= 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");*/
    }

});

보시다시피, javascript 함수를 사용하여 HTML로 변수를 할당 한 다음 내보기에서 이것을 사용하여 필터를 통과합니다.

페이지의 소스를보기 위해 Ctrl + u를 눌렀을 때 인쇄되는 td와 tr을 볼 수 없습니다. 이것이 작동하지 않는 이유에 영향을 미칠 수 있습니까?