Fatal编程技术网
  • angularjs/
  • Angularjs 对象没有'；t不支持此属性或方法<；部门ng转移>；

Angularjs 对象没有'；t不支持此属性或方法<；部门ng转移>；

angularjs twitter-bootstrap

Angularjs 对象没有'；t不支持此属性或方法<；部门ng转移>；,angularjs,twitter-bootstrap,angularjs-directive,Angularjs,Twitter Bootstrap,Angularjs Directive,我正试图开发一个通用的验证指令。我的主要目标是在输入元素的父元素上应用该指令，并使用该指令添加验证状态，如引导提供的has error和has success类 我可以在chrome上完成这项工作。然而，我的问题是从IE8开始的。是的，我运气不好。我必须支持IE8 无论如何，我的代码能够将输入元素转移到模板中的适当位置。然而，我不知道为什么这个错误会出现在IE8中，以及出现在哪一行。错误是 TypeError:对象不支持此属性或方法 这是我的代码，因为这只是我现在正在准备的一个演示，我使用了内联

我正试图开发一个通用的验证指令。我的主要目标是在输入元素的父元素上应用该指令，并使用该指令添加验证状态，如引导提供的
has error
和
has success
类

我可以在chrome上完成这项工作。然而，我的问题是从IE8开始的。是的，我运气不好。我必须支持IE8

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

TypeError:对象不支持此属性或方法

这是我的代码，因为这只是我现在正在准备的一个演示，我使用了内联样式和脚本

<!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>


多功能验证指令

{{errorMessage}

var-app=angular.module（'myApp'，[]）；
app.controller（'DefaultController'，函数（$scope）{
$scope.user={}；
});
app.directive（'validationDirective'，function（）{
返回{
限制：“A”，
/*模板：函数（）{
返回angular.element（document.querySelector（'#validationContent'））.html（）；
},*/
模板：“”，
是的，
链接：函数（范围、元素、属性）{
}
};
});
多功能验证指令
输入您的姓名
用户名在这里：{{User.Name}
如果你认为我在这个问题上使用了错误的方法。请推荐正确的

编辑

经过一些尝试，我能够得出这样的结论，这是由于在要排除的除法中存在输入元素。如果我从该部分中删除输入元素，那么一切都可以正常工作，但这不是该指令的目标。任何人有什么想法吗？我怎样才能解决它？或者是我走错了方向？有什么线索吗？

在经历了很多转折点和之后，发现它与两件事有关：

  • IE8正在检测（而不是忽略）作为额外节点的
    输入
    结束标记后的空白（尝试将其附加到
    div[ng transclude]
    ）

  • JQLite没有正确处理文本节点（我不确定哪些没有正确处理，但我没有心情进一步调查：/）

    • 可能的修复方法：

  • Include jQuery：这解决了问题（可能还有其他潜在的问题），但是必须包含一个完整的库，仅仅是为了用一个版本的浏览器解决一个小问题，这是令人沮丧的

  • 确保控件的结束标记后没有空格字符（空格、制表符、新行）。我不确定哪些标记受影响（
    、
    和
    似乎有，但可能还有其他标记）。
    您可以去除任何空白：

    或者（如果您想保留代码结构，例如为了可读性），您可以在注释块中“包装”空白：

       <div>
       <input ... /><!--
--></div>
    • 另外，请参见此

    您使用的是哪个版本的angular？angular放弃了从版本1.3及更高版本开始的IE8支持；抱歉。我应该提到它。我使用的是1.2.16。请按f12，查看它使用或模拟的是哪个版本的IE。如果它使用的是IE7，这可能是您的问题。要解决此问题，您可以添加以下内容标记中的ng:正在使用IE8标准模式。我尝试将您的代码添加到页面中。它不起作用。：（知道我出现此错误的原因吗？尝试使用数据ng transclude或数据ng:transcludesorry我目前无法创建plunker。在我打开plunker时，您已经完成了您的魔术。谢谢。）@散列：在我发布评论后，我注意到你已经发布了所有必要的信息，所以这只是复制粘贴的问题：）你可以将
    fieldset
    添加到问题标签列表中！