Created
August 9, 2018 21:57
-
-
Save jsmayo/68c6f070ed078727dd4d9a30ccdb6398 to your computer and use it in GitHub Desktop.
Card Demo // source http://jsbin.com/xobemuy
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>Card Demo</title> | |
| <style id="jsbin-css"> | |
| my-card { | |
| display: block; | |
| border: 1px solid #555; | |
| padding: 5px; | |
| } | |
| my-card .pic { | |
| float: right; | |
| max-width: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body ng-app="myCards"> | |
| <my-card my-title="'Ilfracombe'" | |
| my-pic="'http://teropa.info/ilfracombe.jpg'" | |
| my-content="Ilfracombe /ˈɪlfrəkuːm/ is a seaside resort and civil parish on the North Devon coast, England with a small harbour, surrounded by cliffs. The parish stretches along the coast from 'The Coastguard Cottages' in Hele Bay toward the east and 4 miles along The Torrs to Lee Bay toward the west. The resort is hilly and the highest point within the parish boundary is at 'Hore Down Gate', 2 miles inland and 860 feet (270 m) above sea level."> | |
| </my-card> | |
| <script type="text/ng-template" id="myCard"> | |
| <article> | |
| <img class="pic" ng-src="{{pic}}"> | |
| <h2>{{title}}</h2> | |
| {{content}} | |
| </article> | |
| </script> | |
| <script id="jsbin-javascript"> | |
| var app = angular.module('myCards', []); | |
| app.directive('myCard', function() { | |
| return { | |
| scope: { | |
| title: '=myTitle', | |
| pic: '=myPic', | |
| content: '@myContent' | |
| }, | |
| templateUrl: 'myCard' | |
| }; | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">my-card { | |
| display: block; | |
| border: 1px solid #555; | |
| padding: 5px; | |
| } | |
| my-card .pic { | |
| float: right; | |
| max-width: 100px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('myCards', []); | |
| app.directive('myCard', function() { | |
| return { | |
| scope: { | |
| title: '=myTitle', | |
| pic: '=myPic', | |
| content: '@myContent' | |
| }, | |
| templateUrl: 'myCard' | |
| }; | |
| });</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| my-card { | |
| display: block; | |
| border: 1px solid #555; | |
| padding: 5px; | |
| } | |
| my-card .pic { | |
| float: right; | |
| max-width: 100px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('myCards', []); | |
| app.directive('myCard', function() { | |
| return { | |
| scope: { | |
| title: '=myTitle', | |
| pic: '=myPic', | |
| content: '@myContent' | |
| }, | |
| templateUrl: 'myCard' | |
| }; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment