Diretiva AngularJS simples para corresponder à altura da janela

Aqui está uma diretiva de script de café básica para Angular JS para combinar a altura da janela de qualquer objeto com o atributo ‘match-window-height’

app.directive 'matchWindowHeight', ($timeout, $window) ->
    (scope, el, attrs) ->

    setHeight = () ->
      el.css("height", $window.innerHeight+"px")

    setHeight()

    $timeout ->
      setHeight()

    angular.element($window).on "resize", setHeight

    cleanup = ->
      angular.element($window).off "resize", setHeight

    el.on '$destroy', cleanup

Aqui está o tl; dr

Para percorrer o que está acontecendo, este código procura por objetos no DOM que tenham o valor de atributo (ou suponho que também o nome da classe) ‘match-window-height’.

app.directive 'matchWindowHeight', ($timeout, $window) ->

Isso é típico porque o Angular pega o nome do caso do camelo da diretiva definida na primeira linha e o lê em uma string delimitada por traços. Passamos $ timeout e $ window para o construtor como dependências porque os usaremos posteriormente na diretiva.

(scope, el, attrs) ->

O construtor retorna uma função que tem o escopo , el ‘e attrs, que são apenas nomes convencionais que você pode chamar de a, b, c ou qualquer outro, mas os três parâmetros disponíveis serão o escopo, o elemento e os atributos do elemento DOM visados ​​pela directiva.

setHeight = () ->
  el.css("height", $window.innerHeight+"px")

Nossa função setHeight usa a implementação do elemento Angulars de jqLite para anexar a altura da propriedade de estilo com um valor retornado por $ window.innerHeight , apelido interno do Angular para window.innerHeight .

Em seguida, executamos setHeight quando a diretiva corresponde pela primeira vez

setHeight()

e dentro de um $ timeout porque a renderização do DOM pode acontecer de forma assíncrona em alguns casos extremos

$timeout ->
  setHeight()

e vinculamos setHeight ao evento de redimensionamento do serviço $ window .

angular.element($window).on "resize", setHeight

Criamos uma função de limpeza porque queremos remover os ouvintes quando o elemento for destruído.

cleanup = ->
    angular.element($window).off "resize", setHeight

el.on '$destroy', cleanup