JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
var PageApp = angular.module('angularPageApp', ['ngSanitize']);
PageApp.controller('linkListWidgetCtrl', function($scope) {
// define defaults for the directive behavior in case none are
// provided as html attributes (see directive link function below)
$scope.type = 'row';
$scope.start = 'open';
// content a some ui direction taken from the Google Accounts page (/)
$scope.items = [{
header: {
text: 'Sign-in & security',
css: 'fa-lock',
open: true
},
content: {
title: 'Control your password and account-access settings',
links: ['Signing in to Google', 'Device activity and notifications', 'Connected apps & sites']
}
}, {
header: {
text: 'Personal info and privacy',
css: 'fa-user',
open: true
},
content: {
title: 'Manage your visibility settings and the data we use to personalize your experience.',
links: ['Your personal info', 'Activity control', 'Ads settings', 'Account overview', 'Control your content']
}
}, {
header: {
text: 'Account preferences',
css: 'fa-cog',
open: true
},
content: {
title: 'Set language, accessibility, and other settings that help you use Google.',
links: ['Language & Input Tools', 'Accessibility', 'Your Google Drive storage', 'Delete your account or services']
}
}];
// called once from directive link function if the type is set to 'accordion'
$scope.initAccordion = function() {
$scope.closeAll();
if ($scope.start === 'open') {
$scope.items[0].header.open = true;
}
};
// set the header.open boolean to false for all items
// angular should update the ui for us
$scope.closeAll = function() {
for (var i = 0; i < $scope.items.length; i++) {
$scope.items[i].header.open = false;
}
};
// in none-accordion cases all this does is flip the open boolean for
// the clicked header. if our type is accordion and we're opening a
// currently closed item, we close all items before opening the clicked one
$scope.headerClick = function(header) {
if ($scope.type === 'accordion' && header.open === false) {
$scope.closeAll();
}
header.open = !header.open;
};
});
PageApp.directive('linkListWidget', function($timeout) {
return {
restrict: 'E',
template: [
'
',
'
',
'
',
'',
'',
'{{ item.header.text }}',
'',
'',
'',
'
{{ item.content.title }} ',
'
',
'
{{ link }} ',
'
',
'',
'
',
'
',
'
'
].join(''),
link: function(scope, element, attrs) {
// feed any attributes defined in the html into our controller's scope
if (attrs.type) {
scope.type = attrs.type;
}
if (attrs.start) {
scope.start = attrs.start;
}
if (scope.start === 'close') {
scope.closeAll();
}
if (scope.type === 'accordion') {
scope.initAccordion();
}
}
};
});
