个人中心
gpt4 book ai didi

javascript - 在 AngularJS 上将文本渲染为 HTML

转载 作者：行者123 更新时间：2023-12-02 14:58:30 25 4
gpt4 key购买 nike

我正在尝试在表格内显示文本字段(如表单)。我有一个按钮，当我单击它时，会在表格中添加一个新行，并且所有单元格都是表单字段。当我单击按钮时，会出现一个新行(没关系)，但是字段的 html 代码显示为文本。我尝试渲染为 html 但不起作用:

1. Render text as html with angularJs2.AngularJS : Insert HTML into view3.http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in-place-using-html5-content-editable.html]

我做了一个index.html，它提供了3条通往不同 View 的路线。索引文件包含所有 Angular 脚本和我自己的脚本。我正在寻找最简单的方法。这是我第一次使用 Angular。

index.html:

<html ng-app="assets">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="sources/js/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
        <script>
            var assets = angular.module('assets', ['ngRoute']);

            assets.config(function($routeProvider) {
                $routeProvider.
                when('/', {
                    templateUrl: 'home.html'
                }).
                when('/:tipusactius', {
                    templateUrl: 'tipusactius.html',
                    controller: 'TipusActiusCtrl'
                }).
                when('/:tipusactius/alta', {
                    templateUrl: 'tipusactius-alta.html',
                    controller: 'AfegirTipusActiusCtrl'
                }).
                otherwise({
                    redirectTo: '/'
                });
            });


            assets.controller('TipusActiusCtrl', function ($scope, $http){
                $http.get('http://10.0.203.73/WS/ws.php/tipusactius/').success(function(data) {
                    $scope.tipus_actius = data;
                });

                // Ordena taula per id desc
                $scope.sortField = 'idtipus_actius';
                $scope.reverse = false;
            });

            assets.controller('AfegirTipusActiusCtrl', function ($scope, $http, $sce){

                    $scope.renderHTML = "<input type='text' name='firstname'>";

                    // Camps formulari text pla
                    $scope.nomAtribut = "<input type='text' name='firstname'>";
                    $scope.tipus = "<input type='text' name='firstname'>";
                    $scope.mida = "<input type='text' name='firstname'>";
                    $scope.prioritat = "<input type='text' name='firstname'>";
                    $scope.obligatori = "<input type='text' name='firstname'>";



                    $scope.atributs = [];
                    $scope.addField = function() {
                        $scope.atributs.push($scope.atributs.length);
                };
            });

            </script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>
    <body>
        <div class="container" ng-view></div>
    </body>
</html>

tipusactius-alta.html:

<script>

</script>
    <div class="row">
        <div class="col-md-8" ng-controller="AfegirTipusActiusCtrl">
            <button ng-click="addField()">Nou atribut</button>
            <div class="col-md-8">
                <table class="table">
                    <tr>
                        <td>Nom atribut</td>
                        <td>Tipus</td>
                        <td>Mida</td>
                        <td>Prioritat</td>
                        <td>Obligatori</td>
                    </tr>
                    <tr ng-repeat="atribut in atributs">
                        <td>{{nomAtribut}}</td>
                        <td>{{tipus}}</td>
                        <td>{{mida}}</td>
                        <td>{{prioritat}}</td>
                        <td>{{obligatori}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

我在这件事上浪费了整个上午。这是没有 Html 渲染测试的代码。任何帮助都会有所帮助。

已解决:

最后我按照@Ankh 告诉我的那样做了:

The text needs to be compiled as html by Angular for it to render properly. Try creating a 'compile' directive. That will call $compile on any text passed into it..

assets.directive('compile', compile);

function compile($compile)
{
    return {
        restrict: 'A',
        replace: true,
        link: linkFunction
    };

    function linkFunction(scope, element, attrs)
    {
        scope.$watch(
            function (scope)
            {
                return scope.$eval(attrs.compile);
            },
            function (value)
            {
                element.html(value);

                $compile(element.contents())(scope);
            }
        );
    }
} .. and in your template

<tr ng-repeat="atribut in atributs">
    <td compile="nomAtribut"></td>
    <td compile="tipus"></td>
    <td compile="mida"></td>
    <td compile="prioritat"></td>
    <td compile="obligatori"></td>
</tr>

最佳答案

文本需要由 Angular 编译为 html 才能正确渲染。尝试创建一个“编译”指令。这将对传递给它的任何文本调用 $compile ..

assets.directive('compile', compile);

function compile($compile)
{
    return {
        restrict: 'A',
        replace: true,
        link: linkFunction
    };

    function linkFunction(scope, element, attrs)
    {
        scope.$watch(
            function (scope)
            {
                return scope.$eval(attrs.compile);
            },
            function (value)
            {
                element.html(value);

                $compile(element.contents())(scope);
            }
        );
    }
}

..并在您的模板中

<tr ng-repeat="atribut in atributs">
    <td compile="nomAtribut"></td>
    <td compile="tipus"></td>
    <td compile="mida"></td>
    <td compile="prioritat"></td>
    <td compile="obligatori"></td>
</tr>

关于javascript - 在 AngularJS 上将文本渲染为 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35603072/

25 4 0
文章推荐： python - Flask-迁移 "ModuleNotFoundError"
文章推荐： sql - Grails 在没有域关系的表上查询 LEFT JOIN
文章推荐： php - 等待 PROOPH 中投影创建的读取模型中的新记录
文章推荐： grails - Grails应用无法运行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com