Cet objet ne gère pas cette propriété ou cette méthode<div ng-transclude>

Je suis en train de développer un générique de validation de la directive. Mon but principal est d'appliquer la directive sur l'élément d'entrée de la mère et à l'aide de cette directive, je veux ajouter la validation de l'état comme has-error et has-success classes fournies par Bootstrap.

Je suis capable de le faire dans chrome. Cependant, mes problèmes de démarrage avec IE8. Oui, je suis dans le dur de la chance. J'ai à l'appui de IE8.

De toute façon, mon code est en mesure de transclude d'entrée de l'élément à l'endroit approprié dans le modèle. Cependant, je n'ai pas la moindre idée de pourquoi cette erreur est d'apparaître dans IE8 et en ligne également. L'erreur est

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

Voici mon code, puisque c'est juste une démo qui je suis en train de préparer dès maintenant, je l'ai utilisé en ligne styles et des scripts.

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

Et si vous croyez que je suis en utilisant la bonne approche pour résoudre ce problème. S'il vous plaît suggérer la bonne.

MODIFIER

Après quelques coup et d'essai, je suis en mesure de conclure que ceci se produit en raison de la présence de l'élément d'entrée dans la divison être transcluded. Si je supprime l'élément d'entrée de cette division, tout fonctionne bien mais ce n'est pas l'objectif de la directive. N'importe qui ? Une Idée ? Comment je peux faire le tri ? Ou peut-être que je suis dans la mauvaise direction ? Toute indices ?

Quelle est la version angulaire utilisez-vous? Angulaire chuté IE8, en commençant avec la version 1.3 et supérieure;
Désolé. J'aurais dû en parler. Je suis à l'aide de 1.2.16.
Appuyez sur la touche f12 et voir quelle version de IE que c'est à l'aide ou de l'émulation. Si c'est à l'aide de IE7 qui pourrait être votre problème. Pour résoudre ce problème, vous pouvez ajouter les lignes suivantes dans votre <head> balise: <meta http-equiv="X-UA-Compatible" content="IE=edge">
C'est avec IE8 normes de la mode. J'ai essayé d'ajouter votre code dans la page. Ça ne fonctionne pas. 🙁 Aucune idée de pourquoi je suis frapper cette erreur ?
essayez d'utiliser des données-ng-transclude ou data-ng:transclude

OriginalL'auteur Paras | 2014-06-14

  1. 3

    Après beaucoup de break-points et Sarah est une aide précieuse, il s'est avéré qu'il a à faire à deux choses: la

    1. IE8 de détecter (et ne pas l'ignorer) l'espace blanc après votre input'balise de fermeture comme un nœud supplémentaire (en essayant d'ajouter à div[ng-transclude].

    2. JQLite n'est pas la bonne manipulation de texte-nœuds (je ne suis pas exactement sûr de ce que n'est pas traitée correctement, mais je n'étais pas dans l'humeur de l'étudier plus tard :/).

    Des correctifs possibles:

    1. Inclure jQuery: Cela résout le problème (et peut-être d'autres problèmes potentiels), mais c'est frustrant d'avoir à inclure un ensemble de lib, juste pour résoudre un coin cas d'un problème avec une version d'un navigateur.

    2. Assurez-vous il n'y a pas de caractères d'espacement (espace, tabulation, nouvelle-lignes) après votre contrôle de balise de fermeture. Je ne suis pas sûr que les balises sont affectés (<input>, <select> et <fieldset> semblent être, mais il y a peut être d'autres).

      Vous pouvez soit enlever toute white-space: <input ... /></div>

      ou (si vous souhaitez conserver la structure du code, par exemple pour des raisons de lisibilité du saké), vous pouvez "envelopper" l'espace blanc dans un commentaire de bloc:

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

    Voir, aussi, cette courte démo.

    désolé je n'était pas disponible au moment de créer plunker. Au moment où j'ai ouvert plunker, vous avez fait de votre magie. Merci. 🙂
    Après que j'ai posté le commentaire, j'ai remarqué que vous aviez posté, toutes les informations nécessaires, donc, c'était juste une question de copier-coller 🙂
    Vous pouvez ajouter fieldset à la liste de problème tags!
    Ajouté. Thx !

    OriginalL'auteur gkalpak