warunkowo dodaj atrybut elementu w angular.js

Question

Próbuję dodać atrybut automatycznego odtwarzania do tagu wideo na podstawie zmiennej zasięgu is_autoplay.

Przeszukałem cały Internet, ale nie mogłem znaleźć dokładnie tego fragmentu, który chciałem.

Próbowałem podążać, ale żaden z nich nie działa.

---

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

---

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

---

Ktoś nawet zaproponował następującą

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

---

---

Następujące rozwiązanie rozwiązało mój problem.

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); 
       } 
      } 
     ); 
     } 
    }; 
}); 

Każdy może użyć tej dyrektywy, aby dodać/usunąć atrybut warunkowo.

Usage

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

Answer 1

jednym prostym rozwiązaniem byłoby wykorzystanie ng-if do generowania DOM na podstawie warunku.

Na przykład w przypadku, używać

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

Więc jeśli is_autoplay jest true, pierwszy element będzie generowana z atrybutem autoplay a po drugie nie będzie w dom.

Jeśli is_autoplay jest false, drugi element dom zostanie wygenerowany bez atrybutu autoplay.

Answer 2

Można także bezpośrednio ustawić atrybut autoplay opartą na nieruchomości is_autoplay:

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