iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bio directive

This commit is contained in:
Alex Wolfe 2015-05-01 07:40:25 -07:00
parent d4086a71bb
commit 6475fb7e51
3 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/_includes/_scripts-include.jade
View File

@ -2,7 +2,6 @@
script(src="/resources/js/vendor/prettify.js") script(src="/resources/js/vendor/prettify.js")
script(src="/resources/js/vendor/lang-basic.js") script(src="/resources/js/vendor/lang-basic.js")
script(src="/resources/js/vendor/lang-dart.js") script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/vendor/jquery.js")
<!-- Angular Material Dependencies --> <!-- Angular Material Dependencies -->

2
public/about/index.jade
View File

@ -19,7 +19,7 @@
<!-- BIO CARDS --> <!-- BIO CARDS -->
for person, name in bios for person, name in bios
.c3 .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 header
image(src="#{person.picture}" alt="#person.name") image(src="#{person.picture}" alt="#person.name")

31
public/resources/js/directives/bio.js
View File

@ -1,28 +1,27 @@
angularIO.directive('bio', function($rootScope, $timeout) { angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) {
return { return {
restrict: 'A', restrict: 'A',
replace: true,
scope: {}, scope: {},
link: function (scope, element, attrs) { link: function (scope, element, attrs) {
var name = element.attr('data-name'); scope.name = element.attr('data-name');
var bio = element.attr('data-bio'); scope.bio = element.attr('data-bio');
var pic = element.attr('data-pic'); scope.pic = element.attr('data-pic');
var twitter = element.attr('data-twitter'); scope.twitter = element.attr('data-twitter');
var website = element.attr('data-website'); scope.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>' : ''; scope.$twitter = scope.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.$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({ $mdDialog.show({
parent: angular.element(document.body), parent: angular.element(document.body),
targetEvent: $event, targetEvent: $event,
template: template:
'<md-dialog class="modal" aria-label="List dialog">' + '<md-dialog class="modal" aria-label="List dialog">' +
' <md-content>' + ' <md-content>' +
' <img class="left" src="' + pic + '" />' + ' <img class="left" src="' + scope.pic + '" />' +
' <h3 class="text-headline">' + name + '</h3>' + ' <h3 class="text-headline">' + scope.name + '</h3>' +
' <div class="modal-social">' + $twitter + $website + '</div>' + ' <div class="modal-social">' + scope.$twitter + scope.$website + '</div>' +
' <p class="text-body">' + bio + '</p>' + ' <p class="text-body">' + scope.bio + '</p>' +
' </md-content>' + ' </md-content>' +
' <div class="md-actions">' + ' <div class="md-actions">' +
' <md-button ng-click="closeDialog()">' + ' <md-button ng-click="closeDialog()">' +
@ -31,11 +30,11 @@ angularIO.directive('bio', function($rootScope, $timeout) {
' </div>' + ' </div>' +
'</md-dialog>', '</md-dialog>',
locals: { locals: {
items: $scope.items items: scope.items
}, },
controller: DialogController controller: DialogController
}); });
}; });
function DialogController(scope, $mdDialog, items) { function DialogController(scope, $mdDialog, items) {
scope.items = items; scope.items = items;