AngularJS: поведение ng-src по нестандартным атрибутам?

Я интегрирую медиаплеер в свое приложение, используя генератор Video For Everybody. Поскольку проигрыватель имеет резервную копию, если браузер не поддерживает HTML5 video и audio, мне нужно создать элемент object с атрибутами param с источником видео и заполнитель (изображение).

Как и ожидалось, я столкнулся с классической проблемой выражений, которые не решаются вовремя, мой браузер отправляет запросы my.media.com/{{video.src}}, а не my.media.com/somevideo.mp4

К сожалению, есть несколько атрибутов (poster, flashvars, placeholder, чтобы назвать несколько), где я сталкиваюсь с той же проблемой. Как бы я начал создавать то же поведение, что и директивы ng-src или ng-href? Я пробовал искать соответствующий исходный код, но я его не нашел. Вот фрагмент, который демонстрирует проблемный HTML,

<video controls="controls" poster="{{mediaModel.mediaFile2}}" width="300" height="150">
<source ng-src="{{mediaModel.mediaFile}}" type="{{mediaModel.contentType}}" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="300" height="150">
    <param name="movie" value="http://player.longtailvideo.com/player.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="{{'controllerbar=over&amp;image=' + media.mediaFile2 + '&amp;file=' + mediaModel.mediaFile}}" />
    <img ng-src="{{mediaModel.mediaFile2}}" width="300" height="150" title="{{mediaModel.uploadedTime}}" />
</object>

Ответ 1

Поиск источника встроенной директивы упрощается в официальной документации API. В этом случае перейдите к документации ngSrc, в верхней части страницы вы увидите две кнопки: "Улучшить этот документ" и "Просмотреть источник", нажмите на "Просмотр источника", и он автоматически приведет вас к правильному исходному файлу, где определена директива. Это работает по всей встроенной директиве, очень удобно!

Ниже я вставляю код для ngSrc, который достаточно интересен вообще не выглядит сложным, критическая строка кажется priority: 99, на основе комментария рядом с ней означает, что директивы с приоритетом 99 будут выполняться после.

// ng-src, ng-srcset, ng-href are interpolated
forEach(['src', 'srcset', 'href'], function(attrName) {
  var normalized = directiveNormalize('ng-' + attrName);
  ngAttributeAliasDirectives[normalized] = function() {
    return {
      priority: 99, // it needs to run after the attributes are interpolated
      link: function(scope, element, attr) {
        attr.$observe(normalized, function(value) {
          if (!value)
             return;

          attr.$set(attrName, value);

          // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
          // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
          // to set the property as well to achieve the desired effect.
          // we use attr[attrName] value since $set can sanitize the url.
          if (msie) element.prop(attrName, attr[attrName]);
        });
      }
    };
  };
});

Учитывая вышеизложенное, должно быть тривиально реализовать свою собственную директиву.

Ответ 2

Теперь вы можете использовать ng-attr-poster или более широко: ng-attr-whatever.

Ответ 3

Таким образом, наиболее общим, поддерживаемым, настраиваемым и многоразовым решением является создание настраиваемой директивы, которая будет обрабатывать его для вас.

Посмотрите на это - > PLNKR < - там практически все, что вам нужно. Вам нужно немного ослабить его.

Как это работает: к директиве, передающей объект конфигурации (если вам нужно больше объектов, просто создайте дополнительные атрибуты). Элемент может быть в двух состояниях: готов или нет. И $scope.isReady просто указывает, собраны ли все ингредиенты. Если so ngSwitch загружает шаблон videoPlayer, и поскольку вся информация отсутствует, отправляются нежелательные запросы.

Ответ 4

Я столкнулся с аналогичной проблемой с атрибутом poster в теге video. Если вы примените ng-cloak к элементам с атрибутами src -like, они не будут пытаться загружать что-либо, пока они не станут видимыми, когда плащ будет удален.