Question

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

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

我试图找出如何以类似的方式填充我的html模板，但是html工作。

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

我在页脚中尝试类似的东西，但是页脚（）有一个字符串，需要在两行上显示。

要遵循的示例代码（我将其编辑为重要位）： 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;
        };
    }]);

Answer 1

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

$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"直接放在桌子而不是在页面上放置两次。我不知道你有什么特例带你去那里。

如何从AngularJS函数返回html？

1 个答案: