javascript - $templateCache 中的 AngularJS 动态部分被剥离-6ren

javascript - $templateCache 中的 AngularJS 动态部分被剥离

转载作者：行者123 更新时间：2023-12-03 09:08:36

28

4

要么是我的代码出问题了，要么是我犯了一个错误:

我有一个 json 提要:

{
  "sections": [
    {
      "identifier": "header",
      "blocks": [
        {
          "identifier": "onebyone",
          "html": "<h1>API</h1>"
        },
        {
          "identifier": "onebyone",
          "html": "<h1>API</h1>"
        }
      ]
    },
    {
      "identifier": "content",
      "blocks": []
    },
    {
      "identifier": "footer",
      "blocks": []
    }
  ]
}

我在 AngularJS Controller 中进行调用，对各部分进行排序并尝试连接 html block ，因此:

cmsApp.controller('cmsPageCtrl', function($scope, $http, $templateCache, $sce) {

    $http.get("/api.php/api/page/home")
        .success(
            function(response) {
                $scope.sections = [];

                response.sections.forEach(function(el, idx, arr) {
                    var id = el.identifier;

                    $scope.sections[id] = el;
                    //$scope.sections[id].template = "<h1>HOI</h1>";
                    $scope.sections[id].template = 'header.html';

                    var template = "TEST";

                    el.blocks.forEach(function(el, idx, arr) {

                        var partial = el.html;
                        template = template + partial;
                    });

                    template = template + "<div><b>b</b>TEST1</div>";
                    console.log(id);
                    console.log(template);

                    $scope.sections[id].template = 'header.html';

                    $templateCache.put('header.html', $sce.trustAsHtml(template));
                    console.log(template);

                });
            }
        );
});

现在人们会期望以下输出:

<body ng-app="cmsApp" ng-controller="cmsPageCtrl">
    <ng-include src="sections.header.template"></ng-include>
</body>

成为: TEST<h1>API</h1><h1>API</h1><div><b>b</b>TEST1</div>

结果是: <span class="ng-scope">TEST</span><div class="ng-scope"><b>b</b>TEST1</div>

控制台输出为:

cms.ctrl.js (line 33)    TEST<h1>API</h1><h1>API</h1><div><b>b</b>TEST1</div>
cms.ctrl.js (line 34)    TEST<h1>API</h1><h1>API</h1><div><b>b</b>TEST1</div>
cms.ctrl.js (line 39)    content
cms.ctrl.js (line 33)    TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 34)    TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 39)    footer
cms.ctrl.js (line 33)    TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 34)    TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 39)

什么负责剥离 header 部分输出中的 HTML？

最佳答案

Angular 默认这样做是为了防止注入(inject)。如果您确实想这样做，则需要包含 ng-sanitize插件，然后将模块添加到您的应用程序中:

angular.module('myApp', ['ngSanitize']);

然后使用 ng-bind-html 指令绑定(bind)您的 html 内容。

ng-bind-html="myHTML"

Documentation

关于javascript - $templateCache 中的 AngularJS 动态部分被剥离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32144308/

28

4

0

文章推荐： javascript - 确认列表项单击然后按照 href

文章推荐： javascript - 等待回调nodejs

文章推荐： javascript - 从 Controller 访问 templateUrl 内的元素 - AngularJS

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - $templateCache 中的 AngularJS 动态部分被剥离