web-dev-qa-db-fra.com

Angular jette "Erreur: argument invalide". dans IE

J'ai une directive qui prend le texte d'un élément et place wbr éléments après chaque 10ème caractère. Je l'utilise par exemple sur des cellules de tableau avec un texte long (par exemple, des URL), de sorte qu'il ne s'étende pas sur le tableau. Code de la directive:

myApp.directive('myWbr', function ($interpolate) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // get the interpolated text of HTML element
            var expression = $interpolate(element.text());

            // get new text, which has <wbr> element on every 10th position
            var addWbr = function (inputText) {
                var newText = '';
                for (var i = 0; i < inputText.length; i++) {
                    if ((i !== 0) && (i % 10 === 0)) newText += '<wbr>'; // no end tag
                    newText += inputText[i];
                }
                return newText;
            };

            scope.$watch(function (scope) {
                // replace element's content with the new one, which contains <wbr>s
                element.html(addWbr(expression(scope)));
            });
        }
    };
});

Fonctionne bien sauf dans IE (j'ai essayé IE8 et IE9), où une erreur est générée sur la console: Error: Invalid argument.

Voici jsFiddle , en cliquant sur le bouton, vous pouvez voir l’erreur dans la console.

Question tellement évidente: pourquoi l'erreur est-elle présente, quelle en est la source et pourquoi uniquement dans IE?

(Question bonus: comment puis-je créer IEdev tools pour m'en dire plus sur l'erreur, comme la ligne du code source, car il m'a fallu un certain temps pour la localiser, Error: Invalid argument. ne dit pas grand-chose sur l'Origin. )

P.S .: Je sais que IE ne connaît pas le tout, mais ce n’est pas le problème.

Edit: dans mon application réelle, j'ai réécrit la directive pour ne pas regarder le texte de l'élément et le modifier, mais plutôt passer le texte d'entrée via attribut, et fonctionne maintenant dans tous les navigateurs. Mais je suis toujours curieux de savoir pourquoi la solution initiale donnait cette erreur dans IE, démarrant ainsi la prime.

javascriptangularjsinternet-explorerangularjs-directive
14
przno

Votre tentative de créer une directive pour injecter des éléments dans votre chaîne se heurte à un bogue connu de la méthode IE _ appendChild J'ai été capable de reproduire votre erreur IE avec votre violon même après avoir supprimé complètement l'ajout de <div>. 

Notez que si vous supprimez complètement votre concaténation div et tentez de renvoyer newText sous sa forme originale, vous obtenez tout de même

Erreur: argument non valide.

La inclusion sur la vue de l'interface utilisateur ne fonctionne pas sur IE9-10-11

9
Dave Alperovich

Mon "error invalid argument anonymous function call" a été jeté de moi en procédant comme suit dans le code ci-dessous.

Erreur:

<span data-ng-bind="name.first">{{name.first}}</span>

Pas d'erreur:

<span data-ng-bind="name.first"></span>
1
n00bsauce

Pas une Angular réponse (et une vieille question, je le sais), mais je suggérerais que vous prenez peut-être une mauvaise approche du problème. Insérez plutôt des sauts (qui gâcheraient tout balisage dans la chaîne, par exemple), utilisez simplement la propriété CSS text-overflow ou overflow.

0
see sharper

J'ai eu la même erreur dans IE lorsque j'ai eu l'erreur suivante dans le modèle HTML:

<textarea disabled  [(ngModel)]="some.var">{{some.var}}</textarea>

disabled textarea n'autorise pas ngModel dans IE

Chrome, FF ne s'est pas plaint, juste IE Edge. C'est une bonne idée de vérifier le modèle aussi

0
oFace