These are chat archives for angular/angular.js

Jan 2017
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
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>

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';

    .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;
      $ {
        if (open) {
        } else {

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

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

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

Jan 07 2017 21:33
Jan 07 2017 22:07
any of you guys used ngs-ace?
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:
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
Jan 07 2017 22:25
is this even possible
directives: [AceEditorDirective],
Jan 07 2017 22:45
i figured it out
Brandon Ramsey
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