Условно добавить атрибут элемента в angular.js

Я пытаюсь добавить атрибут autoplay в тег видео на основе переменной области видимости is_autoplay.

Я искал по всему Интернету, но я не мог найти точный фрагмент, который я хотел.

Я пробовал, но никто из них не работает.

<video autoplay="{{is_autoplay ? 'true' : 'false'}}">
    ...

<video ng-attr-autoplay="{is_autoplay}">
    ...

Кто-то даже предложил следующее

<video {{is_autoplay ? "autoplay" : ""}}>
    ...

Ниже была решена моя проблема.

app.directive('attronoff', function() {
    return {
    link: function($scope, $element, $attrs) {
        $scope.$watch(
            function () { return $element.attr('data-attr-on'); },
            function (newVal) { 
                var attr = $element.attr('data-attr-name');

                if(!eval(newVal)) {
                    $element.removeAttr(attr);
                }
                else {
                    $element.attr(attr, attr);
                }
            }
        );
        }
    };
});

Любой пользователь может использовать эту директиву для условного добавления/удаления атрибута.

Usage

<video width="100%" height="100%" controls attronoff data-attr-on="{{is_autoplay}}" data-attr-name="autoplay">
    ...

Ответы

Ответ 1

Одним простым решением было бы использовать ng-if для генерации dom на основе условия.

Например, в вашем случае используйте

<video autoplay="true" ng-if="is_autoplay">...</video>
<video ng-if="!is_autoplay">...</video>

Итак, если is_autoplay - true, первый элемент будет сгенерирован с атрибутом autoplay, а второй - не будет в dom.

Если is_autoplay - false, второй элемент dom будет сгенерирован без атрибута autoplay.

Ответ 2

Вы также можете напрямую настроить атрибут автовоспроизведения на основе свойства is_autoplay:

<video autoplay="{{is_autoplay}}">...</video>