bettysteger

/**
 * Sets focus to this element if the value of focus-me is true.
 * @example
 *  <a ng-click="addName=true">add name</a>
 *  <input ng-show="addName" type="text" ng-model="name" focus-me="{{addName}}" />
 */
app.directive('focusMe', ['$timeout', function($timeout) {
  return {
    scope: { trigger: '@focusMe' },
    link: function(scope, element) {

bettysteger

<canvas tc-chartjs-pie chart-data="pieData" chart-options="{segmentShowStroke: false}" width="25" height="25"></canvas>

bettysteger

<nvd3-pie-chart id="{{id}}"
                data="pieData"
                width="80"
                height="80"
                x="xFunction()"
                y="yFunction()">
</nvd3-pie-chart>

bettysteger

<nvd3 options="pieOptions" data="pieData"></nvd3>

bettysteger

$pieSize: 18px;

.pie-wrap { // own class
  float: left;

  svg {
    display: inline-block;
    width: $pieSize;
    height: $pieSize;
    margin: 4px;

bettysteger

/**
 * Menu with clickable items (no hover)
 * Recursive Menu Directive (needs $compile)
 * @see  http://stackoverflow.com/questions/19962872/recursive-menu-directive
 * @example
 *  <menu menu="[{ title: 'Home'}, { title: 'Projects', submenu: [{ title: 'Project1' }] }]"></menu>
 */
app.directive('menu', ['$compile', '$document', '$timeout', function ($compile, $document, $timeout) {
  'use strict';

bettysteger

// AtScript
class MyClass {
  methodA(name:string):int {
    var length:int = name.length;
    return length;
  }
}

// ES6
class MyClass {

bettysteger

// AtScript
@Directive({
  selector: '[blink]'
})
class Blink {
  constructor(elment:Element, options:Options, timeout:Timeout) {}
}

// ES6
class Blink {

bettysteger

var text = "this is a {highlighted} text"; 

var regex = /\{\S+?\}/g;
var html = text.replace(regex, '<mark>$&</mark>'); // $& = matched value = {highlight}
alert(html); // => "this is a <mark>{highlighted}</mark> text"

var regex2 = /\{(\S+?)\}/g; // you need ()-brackets to get $1
var html2 = text.replace(regex2, '<mark>$1</mark>'); // $1 = first () = highlight
alert(html2); // => "this is a <mark>highlighted</mark> text"

bettysteger

#facebox
  position: absolute
  top: 0
  left: 0
  z-index: 100
  text-align: left

#facebox .popup
  position:relative
  border: 3px solid rgba(0,0,0,0)