Adaptive AngularJS Richtlinie

Question

Hier unsere jQuery-Code ist:

$(document).ready(function(){ 
    $(window).on("load resize", function(){ 
     if ($(window).width()<=960){ 
      $(".myDirective").css("flex-direction", "column") 
     } 
     else{ 
      $(".myDirective").css("flex-direction", "row") 
     } 
    }) 
}); 

Jetzt habe ich eine AngularJS Richtlinie mit der gleichen Funktion erstellen möchten. Wie soll ich das machen?

Ich weiß, wie eine Richtlinie mit dem spezifischen Stil zu kreieren:

.directive('myDirective', function(){ 
    return{ 
     link: function(scope, element, attrs){ 
      element.css({ 
       flexDirection: 'column' 
      }); 
     } 
    } 
}); 

Aber wie Bedingungen hinzufügen?

Answer 1

In Ihrem HTML-Code wenden Sie diese windowWidth Direktive auf Ihr Element an, dessen Klasse Sie auf .myDirective festgelegt haben.

Ex. <p class="myDirective" window-width></p> 


app.directive('windowWidth', function($window) { 
    return { 
     restrict: 'A', 
     link: function(scope, $element) { 
      scope.$watch(function() { 
       if($window.width < 960) { 
        $element.css("flex-direction", "column"); 
       } else { 
        $element.css("flex-direction", "row"); 
       } 
      }) 
     }, 
    } 
});