个人中心
gpt4 book ai didi

javascript - 不使用 jQuery 时 ng-include 中的 AngularJS 错误

转载 作者：行者123 更新时间：2023-12-02 17:48:48 25 4
gpt4 key购买 nike

参见 plunker http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview (版本 15)。

我有一个使用 ng-include 呈现分层模板的简单示例。如果包含 jQuery，则可以正常工作。否则:它仅呈现章节的文本。如果章节文本的呈现被注释掉，它将正确呈现段落的文本。它看起来像是 AngularJS JQLite 实现中的一个错误，我认为在“after”函数中实现:

after: function(element, newElement) {
   var index = element, parent = element.parentNode;
   forEach(new JQLite(newElement), function(node){
      parent.insertBefore(node, index.nextSibling);
      index = node;
   });
}

因为我收到错误:TypeError: Cannot call method 'insertBefore' of null。

在上述plunker中可以找到我的代码如下:

index.html:

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS template issue</title>
  <!-- uncomment line below to get it workinG using jQuery -->
  <!-- <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> -->
  <script src="//code.angularjs.org/1.2.10/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-include="'template.html'"/>
</body>
</html>

app.js:

var app = angular.module('plunker', []);

var lorumIpsumText = "<p>Lorem ipsum:<ul><li>one</li><li>two</li><li>three</li></ul></p>";

var chaptercontent = { 
  "Id":"SampleId1","Title":"1. Sample chapter one","Content":"<p>Text of sample chapter one<ul><li>one</li><li>two</li></ul></p>",
      "Paragraphs":[
          {"Id":"SampleId1.1", "Title":"1.1 First sample paragraph", "Content":lorumIpsumText, "Paragraphs":[]},
          {"Id":"SampleId1.2", "Title":"1.2 Second sample paragraph", "Content":lorumIpsumText, "Paragraphs":[]},
      ]
};

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustAsHtml = function(html) { return $sce.trustAsHtml(html); };
  $scope.chaptercontent = chaptercontent;
});

template.html:

<script id="paragraphTmpl.html" type="text/ng-template">
    <h4>{{paragraph.Title}}</h4>
    <!-- comment line below to have the paragraphs render correctly --> 
    <div ng-bind-html="trustAsHtml(paragraph.Content)"/>
    <ng-include ng-repeat="paragraph in paragraph.Paragraphs" 
                src="'paragraphTmpl.html'">
</script>

<div>
    <h3>{{chaptercontent.Title}}</h3>

    <div ng-bind-html="trustAsHtml(chaptercontent.Content)"/>
    <ng-include ng-repeat="paragraph in chaptercontent.Paragraphs" 
                src="'paragraphTmpl.html'"/>
</div>

非常感谢任何关于在没有 jQuery 的情况下使其工作的建议。

编辑:感谢 Ilan，通过不使用自动关闭解决了问题 <div ng-bind-html='...'/> ，但将其写为 <div ng-bind-html='...'></div> 。我不明白为什么，但 jQuery 似乎解决了这个问题。请参阅http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview版本 17 以获得正确的结果)。

最佳答案

经过短暂的调试，我发现错误与您的模板有关:

你忘记用</div>关闭这个div :

<div ng-bind-html="trustAsHtml(paragraph.Content)"></div>

这个错误使得element.parentNode成为null :

after: function(element, newElement) {
   var index = element, parent = element.parentNode; // null

jQuery 的实现有点不同，但这不是 jqLit​​e 的错误。

<小时/>

自闭合 div 标签 ( <div/> ) ?

HTML 5 不支持自闭合 div 标签。

检查这个问题:Is it valid HTML5 to use a single tag for a div?

XHTML(我绝对不关心)支持所有元素的自闭合标签。

参见What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

无论如何，您的代码都不符合 XHTML。

关于javascript - 不使用 jQuery 时 ng-include 中的 AngularJS 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21552560/

25 4 0
文章推荐： javascript - jQuery - cat 未定义 - 无法解决
文章推荐： javascript - 仅在需要时才在 DOM 中使用 jQuery 加载 HTML 元素
文章推荐： javascript - 联系表格在 iPhone 上无效
文章推荐： javascript - 坐标三 Angular 学 - 计算飞行路径弧线的中点
行者123
个人简介

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

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