Angular Directives

Bind My Ember Components

by @johnkpaul

NgConf

Ember Components

Transclude My Directives

by @johnkpaul

EmberConf

Who?

John K. Paul

I ♥ JavaScript

@johnkpaul

john@johnkpaul.com

johnkpaul.com

Directives


  angular.module('emberconf', [])
    .directive('jpAlertMsg', function() {
      return {
        restrict: 'E',
        template: 'Directive Example'
      };
    });


  <body ng-app="emberconf">
    
  </body>

Directives


  angular.module('emberconf', [])
    .directive('jpAlertMsg', function() {
      return {
        restrict: 'C',
        template: 'Directive Example'
      };
    });


  <body ng-app="emberconf">
    <div class="jpAlertMsg"></div>
  </body>

Directives


  angular.module('emberconf', [])
    .directive('jpAlertMsg', function() {
      return {
        restrict: 'C',
        transclude: true,
        compile: function() {
          // stuff here
        },
        scope: {
          title: '&'
          name: '=',
          subTitle: '@',
        }
        template: '<div class='alert' ng-transclude></div>'
      };
    });


  <body ng-app="emberconf">
    <div class="jpAlertMsg" sub-title="test">Directive Example</div>
  </body>

Directives

Make a DSL in your HTML
restrict: element/class/attribute
isolated scope: attribute/parent eval/bidirectional binding
transclude: content/element/function

Transclusion isn't so bad

^^^^ that's transclusion

Transclusion isn't so bad

Same in Ember

JS Bin

/(Web) Components/

Roll your own reusable widgets
Fully encapsulate HTML, CSS, and JS

/(Web)|(Ember) Components/

Roll your own reusable widgets now
Encapsulate structure and behavior

What got me hooked

JS Bin

Angular's bi-directionally bound isolate scope, transcluded, element restricted directives

`===`

Ember Components

Ember Tabs

JS Bin

Component Lists

Questions?

@johnkpaul

EmberConf