drawer-card.html (template)
<div class="drawer-card-wrapper">
<div class="drawer-card-icon" ngClick="dcCtrl.toggle()">
<i class="icon--{{ icon }}"/>
</div>
<div class="{{'drawer-card ' + (classesToAdd || '' )}}">
<ng-transclude></ng-transclude>
</div>
cardDrawer.ts (directive and controller)
declare var _:UnderscoreStatic;
class DrawerCardController {
static $inject = [];
toggle() {
alert('toggled');
}
}
DrawerCardDirective.$inject = [];
export interface IDrawerCardScope {
icon: string
classesToAdd: string
}
export interface IDrawerCardAttributes extends ng.IAttributes {
icon: string
'classes-to-add': string
}
export function DrawerCardDirective():ng.IDirective {
return {
restrict: 'A',
templateUrl: 'drawer-card.html',
controller: DrawerCardController,
controllerAs: 'dcCtrl',
scope: true,
replace: true,
transclude: true,
link(scope:IDrawerCardScope, element:ng.IAugmentedJQuery, attrs:IDrawerCardAttributes, controller:DrawerCardController) {
scope.icon = attrs.icon || 'pencil';
}
};
}
html (this is how i want to use it.)
<div drawer-card>
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>