CODEWITHSUNDEEP
javascriptangularjshtml
jcobo1
jcobo1

Reputation: 1170

Render text as HTML on AngularJS

I'm trying to display text fields (like a form) inside a table. I got a button, when I click it one new line is added to the table and all the cells are form fields. When I click the button one new line appears (that's ok), but, the html code for the fields is showing up like text. I''ve tryed to render as html but it doesn't work:

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

I've done an index.html which provides 3 routes to he diferent views. The index file is what contains all angular sripts and my own scripts. I'm looking for the easiest way. This is the first time I work with 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>

I wasted all my morning with this thing. This is the code without the Html render tests. Any help will be helpful.

Solved:

Finally I did it like @Ankh told me:

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>

Upvotes: 0

Views: 1498

Answers (1)

Ankh
Ankh

Reputation: 5718

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>

Upvotes: 2

Related Questions