Skip to content

Instantly share code, notes, and snippets.

@rafaell-lycan
Created January 28, 2015 22:40
Show Gist options
  • Save rafaell-lycan/62ec6e7fd974e516a32d to your computer and use it in GitHub Desktop.
Save rafaell-lycan/62ec6e7fd974e516a32d to your computer and use it in GitHub Desktop.
Angular - Mobile Smart banner Directive
angular.module('app')
.controller('smartBannerController', function () {
'use strict';
var vm = this;
vm.open = true;
vm.isAndroid = function (){
return ((/android/i).test(navigator.userAgent)) ? true : false;
}
vm.close = function() {
vm.open = false;
}
vm.banner = {
title: '',
subtitle : '',
mode : '',
appImage: '',
appUrl: '',
callToAction: ''
};
});
angular.module('app')
.directive('smartBanner', function () {
return {
restrict: 'AE',
controller: 'smartBannerController',
controllerAs: 'vm',
templateUrl: 'template.html'
};
});
<div class="smartbanner" ng-show="vm.isAndroid() && vm.open">
<div class="smartbanner-container">
<a href="#" class="smartbanner-close" ng-click="vm.close()">&times;</a>
<span class="smartbanner-icon">
<img ng-src="{{vm.banner.appImage}}" alt="vm.banner.title">
</span>
<div class="smartbanner-info">
<div class="smartbanner-title" ng-bind="vm.banner.title"></div>
<div ng-bind="vm.banner.subtitle"></div>
<span ng-bind="vm.banner.mode"></span>
</div>
<a href="{{vm.banner.appUrl}}" class="smartbanner-button" target="_blank">
<span class="smartbanner-button-text" ng-bind="vm.banner.callToAction"></span>
</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment