Update bio card directive, code cleanup

public/about/index.jade

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

public/docs/js/latest/guide/displaying-data.jade

@@ -19,9 +19,10 @@
     h2#section-create-an-entry-point Create an entry point
 
     p Open your favorite editor and create a show-properties.html file with the content:
-    pre.prettyprint.linenums.lang-html
+
-      code.
+    code-example(language="html" escape="html").
-         <display></display>
+      <display></display>
+
     p
      | The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application.
      | We'll assume a structure like this for the rest of the examples here and just focus on the parts that
@@ -35,52 +36,48 @@
 
     p To see this working, create another file, <code>show-properties.js</code>, and add the following:
 
-    .code-box
+    code-tabs
-      pre.prettyprint.linenums.lang-javascript(data-name="es5")
+      code-pane(language="javascript" name="ES5" format="linenums" escape="html").
-          code.
+        // ES5
-            // ES5
+        function DisplayComponent() {
-            function DisplayComponent() {
+          this.myName = "Alice";
-              this.myName = "Alice";
+        }
-            }
+        DisplayComponent.annotations = [
-            DisplayComponent.annotations = [
+          new angular.Component({
-              new angular.Component({
+            selector: "display"
-                selector: "display"
+          }),
-              }),
+          new angular.View({
-              new angular.View({
+            template:
-                template:
+               <p>My name: {{ myName }}</p>,
-                   '&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
+            directives: [angular.For, angular.If]
-                directives: [angular.For, angular.If]
+          })
-              })
+        ];
-            ];
 
-      pre.prettyprint.linenums.lang-typescript(data-name="typescript")
+      code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
-          code.
+        // TypeScript
-              // TypeScript
+        import {Component, View, bootstrap, For} from 'angular2/angular2';
-              import {Component, View, bootstrap, For} from 'angular2/angular2';
 
-              @Component({
+        @Component({
-               selector: 'display'
+          selector: 'display'
-              })
+        })
-              @View({
+        @View({
-                template: `
+          template: `&lt;p&gt;My name: {{ myName }}&lt;/p&gt;`,
-                 &lt;p&gt;My name: {{ myName }}&lt;/p&gt
+          directives: [For]
-               `,
+        })
-               directives: [For]
+        class DisplayComponent {
-              })
+          myName: string;
-              class DisplayComponent {
+          todos: Array&lt;string&gt;
-               myName: string;
-               todos: Array&lt;string&gt;;
 
-               constructor() {
+          constructor() {
-                 this.myName = "Alice";
+            this.myName = "Alice";
-               }
+          }
-              }
+        }
     p.
      You've just defined a component that encompases a view and controller for the app. The view
      defines a template:
-    pre.prettyprint.lang-html
+
-     code.
+    code-example(language="html" escape="html").
-       &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+      <p>My name: {{ myName }}</p>
 
     p.
      Angular will automatically pull the value of <code>myName</code> and insert it into the browser and
@@ -98,16 +95,16 @@
      just one property, myName.
 
     .callout.is-helpful
-        header Note
+      header Note
-        p.
+      p.
-              While you've used <code>template:</code> to specify an inline view, for larger templates you'd
+        While you've used <code>template:</code> to specify an inline view, for larger templates you'd
-              want to move them to a separate file and load them with <code>templateUrl:</code> instead.
+        want to move them to a separate file and load them with <code>templateUrl:</code> instead.
 
     p So you can see Angular dynamically update content, add a line after
 
-        pre.prettyprint.lang-html
+    code-example(language="html" escape="html").
-            code.
+      <p>My name: {{ myName }}</p>
-                &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+
     p to this:
         pre.prettyprint.lang-html
             code.
@@ -120,67 +117,66 @@
         code.
             setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000);
     p Reload the page in your browser and you'll now see the seconds updating automatically.
+
 .l-main-section
     h2#Create-an-array Create an array property and use For on the view
     p Moving up from a single property, create an array to display as a list.
-    .code-box
+
-      pre.prettyprint.lang-javascript(data-name="es5")
+    code-tabs
-          code.
+      code-pane(language="javascript" name="ES5" format="linenums" escape="html").
-              //ES5
+        //ES5
-              function DisplayComponent() {
+        function DisplayComponent() {
-                this.myName = "Alice";
+          this.myName = "Alice";
-                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
-              }
+        }
-      pre.prettyprint.lang-typescript(data-name="typescript")
+      code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
-          code.
+        //Typescript
-              //Typescript
+        constructor() {
-              constructor() {
+          this.myName = "Alice";
-                this.myName = "Alice";
+          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
-                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+        }
-              }
+
     p.
         You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
         with one for each item in the array.
-    .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              template:
-                 &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
-                 &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
-                 &#39;&lt;ul&gt;&#39; +
-                 &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
-                 &#39;{{ name }}&#39; +
-                 &#39;&lt;/li&gt;&#39; +
-                 &#39;&lt;/ul&gt;&#39;,
 
-      pre.prettyprint.lang-typescript(data-name="typescript")
+    code-tabs
-          code.
+      code-pane(language="javascript" name="ES5" format="linenums").
-              //Typescript
+        //ES5
-              template: `
+        template:
-                &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+          &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
-                &lt;p&gt;Friends:&lt;/p&gt;
+          &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
-                &lt;ul&gt;
+          &#39;&lt;ul&gt;&#39; +
-                   &lt;li *for=&quot;#name of names&quot;&gt;
+          &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
-                      {{ name }}
+          &#39;{{ name }}&#39; +
-                   &lt;/li&gt;
+          &#39;&lt;/li&gt;&#39; +
-                &lt;/ul&gt;
+          &#39;&lt;/ul&gt;&#39;,
-              `,
+      code-pane(language="javascript" name="TypeScript" format="linenums").
+        //Typescript
+        template: `
+          &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
+          &lt;p&gt;Friends:&lt;/p&gt;
+          &lt;ul&gt;
+             &lt;li *for=&quot;#name of names&quot;&gt;
+                {{ name }}
+             &lt;/li&gt;
+          &lt;/ul&gt;
+        `,
+
     p.
         To make this work, you'll also need to add the <code>angular.For</code> directive used by the template so
         that Angular knows to include it:
 
-    .code-box
+    code-tabs
-      pre.prettyprint.lang-javascript(data-name="es5")
+      code-pane(language="javascript" name="ES5" format="linenums").
-          code.
+        //ES5
-              //ES5
+        directives: [angular.For]
-              directives: [angular.For]
+      code-pane(language="javascript" name="TypeScript" format="linenums").
-      pre.prettyprint.lang-typescript(data-name="typescript")
+        //Typescript
-          code.
+        import {Component, View, bootstrap, For} from
-              //Typescript
+        ...
-              import {Component, View, bootstrap, For} from
+        directives: [For]
-              ...
+
-                directives: [For]
     p Reload and you've got your list of friends!
     p.
         Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your

public/resources/js/controllers/app-controller.js

@@ -9,20 +9,17 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($sc
   $scope.showMenu = false;
 
   // TOGGLE MAIN NAV (TOP) ON MOBILE
-  $scope.toggleDocsMenu = function(event) {
+  $scope.toggleDocsMenu = function() {
-    event.preventDefault();
     $scope.showDocsNav = !$scope.showDocsNav;
   };
 
   // TOGGLE DOCS NAV
-  $scope.toggleMainMenu = function(event) {
+  $scope.toggleMainMenu = function() {
-    event.preventDefault();
     $scope.showMainNav = !$scope.showMainNav;
   };
 
   // TOGGLE DOCS VERSION & LANGUAGE
-  $scope.toggleVersionMenu = function(event) {
+  $scope.toggleVersionMenu = function() {
-    event.preventDefault();
     $scope.showMenu = !$scope.showMenu;
   };
 

public/resources/js/directives/bio.js

@@ -3,45 +3,44 @@ angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) {
     restrict: 'A',
     scope: {},
     link: function (scope, element, attrs) {
-      scope.name = element.attr('data-name');
+      // SET SCOPE VALUES
-      scope.bio = element.attr('data-bio');
+      scope.name = attrs.name;
-      scope.pic = element.attr('data-pic');
+      scope.pic = attrs.pic;
-      scope.twitter = element.attr('data-twitter');
+      scope.bio = attrs.bio;
-      scope.website =  element.attr('data-website');
+      scope.twitter = attrs.twitter;
-      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 = attrs.website;
-      scope.$website = scope.website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
 
+      // CLOSE MODAL METHOD
+      scope.closeDialog = function() {
+        $mdDialog.hide();
+      };
+
+      // OPEN BIO WHEN CLICKING ON CARD
       element.on('click', function($event) {
         $mdDialog.show({
           parent: angular.element(document.body),
           targetEvent: $event,
+          scope: scope,        // use parent scope in template
+          preserveScope: true,
           template:
             '<md-dialog class="modal" aria-label="List dialog">' +
             '  <md-content>' +
-            '     <img class="left" src="' + scope.pic + '" />' +
+            '     <img class="left" src="{{pic}}" />' +
-            '     <h3 class="text-headline">' + scope.name + '</h3>' +
+            '     <h3 class="text-headline">{{name}}</h3>' +
-            '     <div class="modal-social">' + scope.$twitter + scope.$website + '</div>' +
+            '     <div class="modal-social">' +
-            '     <p class="text-body">' + scope.bio + '</p>' +
+            '       <a ng-show="twitter" class="button button-subtle button-small" href="https://twitter.com/{{twitter}}" md-button>Twitter</a>' +
+            '       <a ng-show="website" class="button button-subtle button-small" href="{{website}}" md-button>Website</a>' +
+            '     </div>' +
+            '     <p class="text-body">{{bio}}</p>' +
             '  </md-content>' +
             '  <div class="md-actions">' +
             '    <md-button ng-click="closeDialog()">' +
             '      Close Bio' +
             '    </md-button>' +
             '  </div>' +
-            '</md-dialog>',
+            '</md-dialog>'
-          locals: {
-            items: scope.items
-          },
-        controller: DialogController
         });
       });
-
-      function DialogController(scope, $mdDialog, items) {
-        scope.items = items;
-        scope.closeDialog = function() {
-          $mdDialog.hide();
-        };
-      }
     }
   };
 });