用角度解析html答案

【问题标题】：Parse html with angular用角度解析html
【发布时间】：2014-10-11 05:00:36
【问题描述】：

如何使用 AngularJS 解析 HTML？我试图构建这样的过滤器：

gameApp.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

在我看来我是这样使用它的：

<div ng-controller="gameCtrl">
    <table>
        <p ng-bind-html="result | unsafe"></p>
    </tr>
    </table>
</div>

但这不起作用。结果包含我想用它们填充表格的 tr 和 td 标签。

这是我的控制器：

var gameApp = angular.module("gameApp", ['ngRoute']);

gameApp.service('link', function() {
    this.user = false;
});
gameApp.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

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) {
    //$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);
    });

    if(link.user) {
        /*$scope.message = "fisk";
        console.log(link.user);*/
    } else {
        /*$scope.message = "Ledsen fisk";
        console.log("Är inte satt");*/
    }
});

谁能帮帮我？

【问题讨论】：

你应该先学习 HTML，然后你可以冒险学习一些高级的东西，比如 javascript 和 Angular。
一个小提示：认为在result = ""; 之前需要一个var 或只是var k = 1, result = "";
我认为你需要添加 ng-sanitize 模块
@Brunis：学习 HTML。你是认真的吗？我会看看 ng-sanitize。
阅读一些 Angular 教程会满足您的兴趣，因为它可以完成您尝试使用 javascript 手动执行的操作。

标签： javascript angularjs html-table html-parsing

【解决方案1】：

理想情况下，您会使用模板或视图来显示 HTML 并将数据传递给它们。除了实时代码编辑器，显示原始 HTML 会打开 XSS 和其他安全漏洞。

【讨论】：