如何从 AngularJS 函数返回 html？答案

【问题标题】：How does one return html from an AngularJS function?如何从 AngularJS 函数返回 html？
【发布时间】：2017-09-07 16:22:05
【问题描述】：

我是创建 AngularJS 样式代码的新人。我正在尝试以 AngularJS 格式重新创建现有网站。

我终于想出了如何在外部文件中制作应用程序/控制器并赋予控制器功能。然后我可以让这些函数返回变量，尤其是字符串，以在我的 .html 文件中填充信息，但是当我使用 html 标记时，它们在 .html 中用作文字。

我正在尝试找出如何以类似的方式填充我的 html 模板，但 html 可以正常工作。

在其他 JS 格式中，我可以写入文档/响应，或者至少让函数返回一个值，然后让原始 JS/HTML 将该返回值写入 html。

我正在尝试在页脚中进行类似的操作，但 Footer() 有一个字符串需要显示在两行中。

要遵循的示例代码（我将把它编辑到重要的部分）： 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>

应用程序/控制器：

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;
        };
    }]);

【问题讨论】：

标签： html angularjs function controller

【解决方案1】：

使用 ng-bind-html 在页面上显示 HTML，但在此之前，您应该通过调用 $sce.trustAsHtml 方法将 html 设为受信任。

$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

建议：您可以将ng-controller="UniversalController" 直接放在桌子上，而不是在页面上放置两次。我不知道你有什么特殊情况，那个带你去那里。

【讨论】：

就像我说的，我还是新手，所以我试着慢慢地走过。我将控制器放在一个元素上，然后添加了第二个元素，所以我还没有考虑如何整合控制器。我知道我最终会拥有至少一个其他控制器，但我可能不得不发布另一个关于防止它们重叠的问题。
谢谢你，但我一定是做错了什么，我似乎无法得到任何回报你的建议。如果我能让它工作，我会继续调查并将其标记为答案。
@Kamurai 你看过 plunker 演示链接了吗。它可能会帮助你更好地理解它
还有宾果游戏，我没有在 plunket 上查看您的 .js 文件并忘记像这样添加 $sce： Universal.controller("UniversalController", ['$scope', '$sce' , 函数 ($scope, $sce)