Question

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

我可以用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>

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

修改

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

Answer 1

经过大量的突破和 Sarah's invaluable help 之后，事实证明它与两件事有关：

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

可能的修复：

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

另请参阅此 short demo 。

对象不支持此属性或方法<div ng-transclude =“”> </div>

1 个答案: