These are chat archives for angular/angular.js

7th
Jan 2017
Kasper
@aventic
Jan 07 2017 13:47
Hello guys. I'm planning on making a carousel (slider). I'm just wondering if I should create it as a component or a directive. With this carousel, I know there will be a lot or some of DOM manipulation, with width and heights of the slides etc. Any pointers? Thanks you guys.
Roy Mor
@Kashio
Jan 07 2017 14:55

Hey I have a dropdown directive inside another directive template. I wish to style the dropdown element with some css (width, height, background color, etc..) so this is the use of the dropdown directive inside the parent directive:

<div id="betsboard">
  <div id="betsboard-header">
    <dropdown class="pointer" id="minute-button" options="vm.minutes" selected="vm.minute" slide-speed="normal"></dropdown>
  </div>
</div>

This is the css for the template of this directive:

#betsboard {
  display: table;
  width: 607px;
  height: 274px;
  background-color: #1c1f28;
  border-radius: 3px;
}

#betsboard-header {
  display: table-row;
  width: 607px;
  height: 38px;
}

#minute-button {
  width: 42px;
  height: 38px;
  background-color: #262935;
  border-radius: 3px 3px 0 0;
  color: white;
  font-family: "Open Sans";
}

The problem is the styling for #minute-button is not applied and not shown.
This is the directive code:

(function () {
  'use strict';

  angular
    .module('app.widgets')
    .directive('dropdown', dropdown);

  dropdown.$inject = [];

  function dropdown() {
    return {
      link: link,
      restrict: 'E',
      scope: {
        options: '=',
        selected: '=',
        slideSpeed: '@'
      },
      transclude: true,
      templateUrl: '/src/app/widgets/dropdown/dropdown.tpl.html'
    };

    function link(scope, element, attrs) {
      var $element = $(element);
      var $dropdown = $element.find('.dropdown');
      var open = false;
      $dropdown.hide();
      $element.click(function() {
        if (open) {
          slideUp();
        } else {
          slideDown();
        }
      });

      scope.selectOption = function(option) {
        $dropdown.css('pointerEvents', 'none');
        scope.selected = option.id;
        slideUp();
      };

      function slideDown() {
        $dropdown.slideDown(scope.slideSpeed, function() {
          open = true;
        });
      }
      function slideUp() {
        $dropdown.slideUp(scope.slideSpeed, function() {
          $dropdown.hide();
          $dropdown.css('pointerEvents', 'auto');
          open = false;
        });
      }
    }
  }
})();

Any ideas on how to make the css apply to the dropdown directive element ?

Ennobleng
@Ennobleng
Jan 07 2017 21:33
Hi
Owen
@LiverpoolOwen
Jan 07 2017 22:07
any of you guys used ngs-ace?
Owen
@LiverpoolOwen
Jan 07 2017 22:13
clouds.js:1 Uncaught ReferenceError: ace is not defined
I am getting this error. I have imported the directive into my component and tried using it. The directive itself imports ace as brace so I think this require is messing things up
Confsed :worried:
Owen
@LiverpoolOwen
Jan 07 2017 22:19
hmm i spotted the component has a directives: [AceEditorDirective] in the meta data
but angualr does not seem to like this
Owen
@LiverpoolOwen
Jan 07 2017 22:25
is this even possible
@Component({
directives: [AceEditorDirective],
Owen
@LiverpoolOwen
Jan 07 2017 22:45
i figured it out
Brandon Ramsey
@brandonramsey
Jan 07 2017 23:21
Is there a way to short-circuit or pause ng-repeat’s dirty checking? I have an immutable list I’m using as my ng-repeat source, and I only want ng-repeat to check the list when it changes. I know I can use track-by so that the watcher is only looking at one key of each item, but I’d like to prevent it altogether if possible