angularjs – Object不支持此属性或方法

发布时间：2020-12-17 17:13:32 所属栏目：安全来源：网络整理

导读：我正在尝试开发一个通用的验证指令.我的主要目的是在input元素的父元素上应用指令并使用该指令,我想添加一些验证状态,如bootstrap提供的has-error和has-success类. 我可以用chrome做到这一点.但是,我的问题始于IE8.是的,我运气不好.我必须支持IE8. 无论如何,

我正在尝试开发一个通用的验证指令.我的主要目的是在input元素的父元素上应用指令并使用该指令,我想添加一些验证状态,如bootstrap提供的has-error和has-success类.

我可以用chrome做到这一点.但是,我的问题始于IE8.是的,我运气不好.我必须支持IE8.

无论如何,我的代码能够在模板中的适当位置转换输入元素.但是,我不清楚为什么在IE8中弹出这个错误以及在哪一行也是如此.错误是

TypeError：Object不支持此属性或方法< 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>

如果你认为我使用错误的方法解决这个问题.请建议正确的.

编辑

在一些命中和试验之后,我能够得出结论,这是由于存在要被转换的divison中的输入元素而发生的.如果我从该分区中删除输入元素,一切正常,但这不是指令的目标.任何人？任何的想法？我怎么能把它整理出来？或者我可能是错误的方向？有线索吗？

解决方法

在经历了很多突破点和 Sarah’s invaluable help之后,事实证明它与两件事有关：

> IE8在输入的结束标记作为额外节点后检测(而不是忽略)空白区域(尝试将其附加到div [ng-transclude]).
> JQLite没有正确处理文本节点(我不确定什么处理不当,但我没有进一步调查的心情：/).

可能的修复：

>包括jQuery：这解决了问题(也许还有其他潜在的问题),但是必须包含一个完整的lib,只是为了解决一个版本的一个浏览器的角落问题,这是令人沮丧的.
>确保控件的结束标记后面没有空格字符(空格,制表符,换行符).我不确定哪些标签会受到影响(< input>,< select>和< fieldset>似乎是,但可能还有其他标签).
您可以删除任何空格：< input ... />< / div>
或者(如果你想保留代码结构,例如为了便于阅读),你可以在注释块中“包装”空格：

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

另见,这是short demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!