How does one return html from an AngularJS function?

Question

I'm brand new creating AngularJS style code. I'm attempting to recreate an existing site in AngularJS format.

I finally figured out how to make an app/controller in an external file and give the controller functions. I can then have those functions return variables, particularly strings, to fill in information in my .html file, but when I use html tags, they are used as literals in the .html.

I'm trying to find out how to fill my html template in a similar manner, but with the html working.

In other JS formats, I can write to the document/response, or at least have the function return a value to then have the original JS/HTML write that return value as html.

I'm attempting something similar here in the footer, but the Footer() has a string that needs to be displayed on two lines.

Example code to follow (I'll edit it down to the important bits): HTML:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script language="JavaScript" src="./Universal.js" runat="server"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="./Main.css" rel="stylesheet" type="text/css">
    </head>
    <body id="idBody" ng-app="Universal">
        <table id="idTableMain">
            <tr id="idFooterRow">
                <td id="idFooterMain" colspan="3">
                    <p id="idFooterContent" ng-controller="UniversalController">
                        {{Footer()}}
                    </p>
                    <p id="idFooterManagement" ng-controller="UniversalController">
                        {{WebMaster()}}
                    </p>
                </td>
            </tr>
        </table>
    </body>
</html>

App/Controller:

var Universal = angular.module("Universal", []);

Universal.controller("UniversalController", ['$scope', function ($scope)
    {
        $scope.Footer = function()
        {
            $scope.vResult = "© Copyright 2012 All rights reserved<br>";    
            $scope.vResult += "House That Kamurai Built";
            return $scope.vResult;
        };

        $scope.WebMaster = function()
        {
            $scope.vResult = "Website managed by Kamurai.";
            return $scope.vResult;
        };
    }]);

Pankaj Parkar · Accepted Answer · 2017-09-07 16:47:07Z

7

Use ng-bind-html to display HTML on page, but before doing that you should make that html as trusted by calling $sce.trustAsHtml method.

$scope.Footer = function() {
    $scope.vResult = "© Copyright 2012 All rights reserved<br>";
    $scope.vResult += "House That Kamurai Built";
    return $sce.trustAsHtml($scope.vResult);
};

Html

<p id="idFooterContent" 
  ng-controller="UniversalController" 
  ng-bind-html="Footer()">
</p>

Demo

Suggestion: You could have placed ng-controller="UniversalController" directly on table instead of placing twice on page. I don't know what special case you had, that led you there.

answered Sep 7, 2017 at 16:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kamurai Over a year ago

Like I said, I'm still new to this, so I'm trying to walk through this slowly. I put the controller on the one element, did that and then added the second, so I haven't got around to how to consolidate the controllers yet. I know I'm going to have at least one other controller eventually, but I'll probably have to post another question about keeping them from overlapping.

Kamurai Over a year ago

Thank you, but I must be doing something else wrong, I can't seem to get anything to return with your suggestion. I'll keep looking into it and mark this as the answer if I can get it working.

Pankaj Parkar Over a year ago

@Kamurai did you looked at the plunker demo link.. It might help you understand it in better way

Kamurai Over a year ago

And bingo, I hadn't looked at your .js file on plunket and forgot to add $sce like so: Universal.controller("UniversalController", ['$scope', '$sce', function ($scope, $sce)

Collectives™ on Stack Overflow

How does one return html from an AngularJS function?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related