个人中心
gpt4 book ai didi

AngularJS - 如何将已编译的 HTML 插入到我的指令模板中？

转载 作者：行者123 更新时间：2023-12-01 11:36:50 25 4
gpt4 key购买 nike

我很确定我这样做是错误的方式，所以任何帮助将不胜感激...

给定以下 plunker:http://plnkr.co/edit/hCjTdt8XmlVPKGgzvgFu?p=preview

我正在尝试编译一些 Html 并将其插入到我的模板中的特定位置。但是，我收到一个错误:

Can't interpolate: My Value: {{innerHtml}}
TypeError: Converting circular structure to JSON

我很确定这是因为我试图将整个元素作为 Html 插入，但我不确定如何完成我正在尝试做的事情。

插件代码:

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body ng-app='myApp'>
    <div ng-controller='TestCtrl'>
      <test-directive></test-directive>
    </div>
    <script>
      var app = angular.module('myApp', []);

      app.controller("TestCtrl", ['$scope', function($scope) {
        $scope.myValue = "Hello, World!";
      }]);

      app.directive('testDirective', ['$compile', function($compile) {
        return {
          restrict: 'E',
          template: "<h1>Title</h1>My Value: {{innerHtml}}",
          link: function (scope, element, attr) {
            scope.innerHtml = $compile("<input type='text' ng-model='myValue' />")(scope);
          }
        }
      }]);
    </script>
  </body>
</html>

最佳答案

我想您可能会对尝试访问范围内的 innerHtml 感到困惑？我认为您需要访问您的元素才能插入 DOM。该元素基本上是您模板中的任何内容，但已经编译(链接在编译后发生)。因此您可以编译并将其添加到您的元素中。

试试这个:

element.append($compile("<input type='text' ng-model='myValue' />")(scope));

而不是 scope.innerHtml 行。在 plnkr 工作:http://plnkr.co/edit/z3k6BPVNcNxi6d4XBfXX?p=preview

关于AngularJS - 如何将已编译的 HTML 插入到我的指令模板中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26102608/

25 4 0
文章推荐： Nuget 无法安装特定版本
文章推荐： java - 我的 Android 偏好设置存在布局问题
文章推荐： java - 使用扫描仪读取 .csv 文件
文章推荐： spring - 将分离的实体合并到 JPA 中的实体管理器的最佳方法是什么
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com