Skip to content

Instantly share code, notes, and snippets.

@antonioaguilar
Forked from demetriusnunes/Component.js
Created December 22, 2015 13:15
Show Gist options
  • Save antonioaguilar/8a311fd0330a86ec28a9 to your computer and use it in GitHub Desktop.
Save antonioaguilar/8a311fd0330a86ec28a9 to your computer and use it in GitHub Desktop.
Concise component definition for AngularJS 1.x
'use strict';
angular.module('Component', [])
.factory('Component', function () {
return function(bindings, template, linkFn, options) {
var directive = {
scope: parseBindings(bindings),
template: parseTemplate(template),
link: linkFn
};
return angular.extend({}, directive, options);
};
function parseBindings(bindings) {
return bindings.reduce(function(scope, binding) {
var name = binding.slice(1);
scope[name] = binding.slice(0, 1);
return scope;
}, {});
}
function parseTemplate(template) {
return angular.isArray(template) ? template.join('') : template;
}
});
'use strict';
angular.module('app', ['Component'])
.directive('personItem', function (Component) {
return Component(
['@name', '@age', '@highlight', '&onClick'],
['<div ng-click="onClick($event)"',
' ng-class="{ highlight: highlight === \'true\' }">',
' <h1>{{:: name}}</h1>',
' <p>{{:: age }}</p>',
'</div>']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment