Angular selector directive (LiveScript)

selector.ls

angular.module \app.directives .directive \selector, [
  \$compile
  \$parse
  \$templateCache
  \$appScope
  \$timeout
  ($compile, $parse, $templateCache, $appScope, $timeout)->
    restrict: \A
    templateUrl: \selector-template
    replace: true
    require: \?ngModel
    scope: true
    transclude: true
    link: !($scope,element,attrs,model)->

      [ elHidden
        elButton
        elOptions ] =
        [ element.find \.hidden
          element.find \.selector-button
          element.find \.options ]

      # events & bindings #


      dropdownOptions = void

      model?.$render = ->
        $scope.value = model?.$viewValue

      $scope.$watch \value, -> $scope.htmlValue = htmlValueOf it

      $scope.$watch \lang, ->
        $scope.options =
              | attrs.options? => $scope |> ($parse attrs.options)
              | _ => ( (elHidden.find \option).add (elHidden.find \.option)).toArray! |>
                  map ->
                    value: it.value or ($ it .data \value) or ''
                    html: it.innerHTML
        $scope.htmlValue = htmlValueOf $scope.value

      $scope.$watch \shown, ->
        if it and not $scope.initialized
         dropdownOptions := $scope |> $compile ( $ $templateCache.get \selector-options-template .appendTo $ \body )
         $scope.initialized = yes

        $timeout ->
          if $scope.shown
            $appScope.$broadcast \hideSelectors, element
            place!
        , 1

      $scope.$on \popupClicked, (it, event)->
        if not ($ event?.target)?.parents \.selector-container .is \div
          $scope.shown = no

      $scope.$on \popupHide, (it, event)->
        $scope.shown = no

      $scope.$on \hideSelectors, (it, el)->
        if el isnt element
          $scope.shown = no

      $scope.$on \$destroy, ->
        dropdownOptions?.remove!


      if attrs.options
        $scope.$watch "#{attrs.options}",  ->
          $scope.options = $scope |> $parse attrs.options

      #$scope.$watch \options, ->
        #console.log \OPTIONS:, it

      # functions #

      htmlValueOf = (key)-> ($scope.options |> filter -> (it.value == key) )?[0]?.html or key

      checkFn =
        | attrs.checkFn? => $parse(attrs.checkFn)($scope)
        | _ => -> no

      place = ->
        scrollTop = ($ window).scrollTop!
        bounds = element[0].getBoundingClientRect!
        width = element.width!
        height = element.height!

        $scope.optStyle <<<<
          top: "#{bounds.top + height - 1}px"
          left: "#{bounds.left}px"
          min-width: "#{width - 2}px"

      # $scope #

      $scope <<<<
        initialized: no
        options:
              | attrs.options? => $scope |> ($parse attrs.options)
              | _ => ( (elHidden.find \option).add (elHidden.find \.option)).toArray! |>
                  map ->
                    value: it.value or ($ it .data \value) or ''
                    html: it.innerHTML
        optionClass: [
        ]                         #{selected: option.value == value, checked: checkFn(option.value)}
        shown: no
        optClass: _ =
                    | element.hasClass \h4 => \.h4
                    | _ => ''
        optStyle: {}
        toggle: -> $scope.shown = !$scope.shown
        hoverItem: ->
          # TODO
        editable: attrs.editable or no
        selectItem: ->
          #$scope.currentOption = it
          $scope.value = it
          $scope.shown = no
          model?.$setViewValue it
        checkFn: checkFn
]