bio directive
This commit is contained in:
parent
d4086a71bb
commit
6475fb7e51
|
@ -2,7 +2,6 @@
|
|||
script(src="/resources/js/vendor/prettify.js")
|
||||
script(src="/resources/js/vendor/lang-basic.js")
|
||||
script(src="/resources/js/vendor/lang-dart.js")
|
||||
script(src="/resources/js/vendor/jquery.js")
|
||||
|
||||
|
||||
<!-- Angular Material Dependencies -->
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
<!-- BIO CARDS -->
|
||||
for person, name in bios
|
||||
.c3
|
||||
md-card(bio class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}" data-name="#{person.name}" ng-click="showBio($event)")
|
||||
md-card(biocard class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}" data-name="#{person.name}")
|
||||
header
|
||||
image(src="#{person.picture}" alt="#person.name")
|
||||
|
||||
|
|
|
@ -1,28 +1,27 @@
|
|||
angularIO.directive('bio', function($rootScope, $timeout) {
|
||||
angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
replace: true,
|
||||
scope: {},
|
||||
link: function (scope, element, attrs) {
|
||||
var name = element.attr('data-name');
|
||||
var bio = element.attr('data-bio');
|
||||
var pic = element.attr('data-pic');
|
||||
var twitter = element.attr('data-twitter');
|
||||
var website = element.attr('data-website');
|
||||
var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' + element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
|
||||
var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
|
||||
scope.name = element.attr('data-name');
|
||||
scope.bio = element.attr('data-bio');
|
||||
scope.pic = element.attr('data-pic');
|
||||
scope.twitter = element.attr('data-twitter');
|
||||
scope.website = element.attr('data-website');
|
||||
scope.$twitter = scope.twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' + element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
|
||||
scope.$website = scope.website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
|
||||
|
||||
scope.showBio = function(event) {
|
||||
element.on('click', function($event) {
|
||||
$mdDialog.show({
|
||||
parent: angular.element(document.body),
|
||||
targetEvent: $event,
|
||||
template:
|
||||
'<md-dialog class="modal" aria-label="List dialog">' +
|
||||
' <md-content>' +
|
||||
' <img class="left" src="' + pic + '" />' +
|
||||
' <h3 class="text-headline">' + name + '</h3>' +
|
||||
' <div class="modal-social">' + $twitter + $website + '</div>' +
|
||||
' <p class="text-body">' + bio + '</p>' +
|
||||
' <img class="left" src="' + scope.pic + '" />' +
|
||||
' <h3 class="text-headline">' + scope.name + '</h3>' +
|
||||
' <div class="modal-social">' + scope.$twitter + scope.$website + '</div>' +
|
||||
' <p class="text-body">' + scope.bio + '</p>' +
|
||||
' </md-content>' +
|
||||
' <div class="md-actions">' +
|
||||
' <md-button ng-click="closeDialog()">' +
|
||||
|
@ -31,11 +30,11 @@ angularIO.directive('bio', function($rootScope, $timeout) {
|
|||
' </div>' +
|
||||
'</md-dialog>',
|
||||
locals: {
|
||||
items: $scope.items
|
||||
items: scope.items
|
||||
},
|
||||
controller: DialogController
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
function DialogController(scope, $mdDialog, items) {
|
||||
scope.items = items;
|
||||
|
|
Loading…
Reference in New Issue