Ошибка AngularJS v1.2.5 script с атрибутом textarea и placeholder с использованием IE11

У меня есть форма Angular JS v1.2.5, которая не будет работать в IE11. Он отлично работает в Firefox, Chrome, Safari. Моя форма использует текстовое поле с интерполяцией внутри атрибута placeholder.

  <body ng-controller="MainCtrl">
    <p>Hello {{ name }}!</p>
    <textarea rows="4" placeholder="Description of the {{ name }}"></textarea>
  </body>

Если атрибут placeholder указан с интерполяцией, я получаю следующую ошибку (только в IE).

Error: Invalid argument.
   at interpolateFnWatchAction (https://localhost:44300/Scripts/angular.js:6410:15)
   at $digest (https://localhost:44300/Scripts/angular.js:11581:23)
   at $apply (https://localhost:44300/Scripts/angular.js:11832:13)
   at done (https://localhost:44300/Scripts/angular.js:7774:34)
   at completeRequest (https://localhost:44300/Scripts/angular.js:7947:7)
   at onreadystatechange (https://localhost:44300/Scripts/angular.js:7903:11)

Здесь Plnkr отлично работает в Firefox, Chrome, Safari, но не в IE11. http://plnkr.co/edit/4cJzxtVSDoL2JMI9nYrS?p=preview

Я потерялся, пытаясь отлаживать внутри Angular.js. Я бы очень признателен за советы, которые помогут мне в правильном направлении. Спасибо.

Ответы

Ответ 1

Мне удалось получить все, что правильно работает в IE, используя директиву ng-attr-placeholder вместо привязки непосредственно к атрибуту в DOM, Например:

<textarea ng-attr-placeholder="Description of the {{ name }}"></textarea>

Ответ 2

Zsong, упомянутый выше, это ошибка - https://github.com/angular/angular.js/issues/5025

В качестве временной меры я написал директиву для обработки заполнителей для текстовых областей в IE. Эта директива установит атрибут placeholder, если это не IE. Это необходимо только в текстовых областях (не для всех заполнителей).

//This directive corrects an interpolation error with textarea / IE
app.directive("placeholderAttr", 
    function ($timeout, $parse) {
        return {
            restrict: "A",
            scope: {
                placeholderAttr: '@'
            },
            link: function (scope, element, attrs, controller) {

                //Test for IE
                var ie = navigator.userAgent.match(/MSIE/);
                var ie11 = navigator.userAgent.match(/Trident\/7\./);

                //If this is IE, remove the placeholder attribute
                if (!ie && !ie11)
                {
                    scope.$watch("placeholderAttr", function (value) {
                        element.attr("placeholder", scope.$eval(value));
                    });
                }

            }
        };

    });

Использование:

<textarea rows="4" data-placeholder-attr="Description of the {{ name }}"></textarea>

Надеюсь, это поможет кому-то еще... IE - urgh.

Ответ 3

У меня была такая же проблема при использовании библиотеки angular -translate (https://github.com/angular-translate/angular-translate).

В частности, при попытке использовать "директивный способ" для перевода на динамический текст, содержащий индекс. Я заменил директиву "способ фильтрации" для перевода, и проблема была решена.

До:

<div translate>{{ scope.textInArray[someIndex] }}</div>

После:

<div>{{ scope.textInArray[someIndex] | translate }}</div>

Примечание. Даже не включая "{{...}}" в качестве значения атрибута для перевода или замены этого вызова функции решает мою проблему.