gpt4 book ai didi

angularjs - 对象不支持此属性或方法

转载 作者:行者123 更新时间:2023-12-02 22:44:43 25 4
gpt4 key购买 nike

我正在尝试开发一个通用验证指令。我的主要目标是将指令应用于输入元素的父级并使用该指令,我想添加验证状态,如 has-errorhas-success Bootstrap 提供的类。

我可以在 Chrome 中执行此操作。然而,我的问题是从 IE8 开始的。是的,我运气不好。我必须支持 IE8。

无论如何,我的代码能够将输入元素嵌入到模板中的适当位置。但是,我不知道为什么这个错误会在 IE8 中弹出以及在哪一行弹出。错误是

TypeError: Object doesn't support this property or method<div ng-transclude>

这是我的代码,因为它只是我现在正在准备的演示,所以我使用了内联样式和脚本。

<!DOCTYPE html>
<html ng-app="myApp" id="ng-app">
<head>
<title>All in One Validation Directive</title>

<script type="text/javascript" src="scripts/angular.js"></script>
<link type="text/css" rel="stylesheet" href="styles/bootstrap.css"/>

<script type="text/ng-template" id="validationContent">
<div ng-transclude></div>
<p class="bg-danger">{{errorMessage}}</p>
</script>

<script type="text/javascript">
var app=angular.module('myApp', []);

app.controller('DefaultController', function($scope){
$scope.user={};
});

app.directive('validationDirective', function(){
return {
restrict: 'A',
/*template: function(){
return angular.element(document.querySelector('#validationContent')).html();
},*/
template: '<div ng-transclude></div>',
transclude: true,
link: function(scope, element, attrs){

}
};
});
</script>
</head>

<body ng-controller="DefaultController">
<div class="container">
<div class="panel panel-default">

<div class="panel-heading">
<h4>All in One Validation Directive</h4>
</div>


<div class="panel-body">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Enter Your Name</label>

<div class="col-xs-3" data-validation-directive>
<input type="text" class="form-control" ng-model="user.name">
</div>
</div>
</div>
</div>
User Name is here :{{user.name}}
</div>
</div>
</body>
</html>

如果您认为我对这个问题使用了错误的方法。请推荐合适的。

编辑

经过一些点击和尝试,我可以得出结论,这是由于要嵌入的分区中存在输入元素而发生的。如果我从该部门中删除输入元素,一切都会正常工作,但这不是该指令的目标。任何人 ?任何想法 ?我该如何解决?或者我可能方向错误?有什么线索吗?

最佳答案

经过很多断点和 Sarah's invaluable help ,事实证明这与两件事有关:

  1. IE8 会检测(而不是忽略) input 之后的空格。的结束标记作为额外节点(尝试将其附加到 div[ng-transclude]

  2. JQLite 没有正确处理文本节点(我不太确定什么处理不当,但我没有心情进一步调查:/)。

<小时/>

可能的修复:

  1. 包含 jQuery:这可以解决问题(也许还可以解决其他潜在问题),但令人沮丧的是必须包含整个库,只是为了解决一个浏览器的一个版本的极端情况问题。

  2. 确保控件的结束标记后没有空白字符(空格、制表符、换行符)。我不确定哪些标签受到影响( <input><select><fieldset> 似乎受到影响,但可能还有其他标签)。
    您可以删除任何空白: <input ... /></div>
    或者(如果您想保留代码结构,例如为了可读性)您可以将空格“包装”在注释 block 中:

       <div>
    <input ... /><!--
    --></div>
<小时/>

另请参阅此 short demo

关于angularjs - 对象不支持此属性或方法<div ng-transclude>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24221661/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com