' + scope.name + '
' + - ' ' + - '' + scope.bio + '
' + + '{{name}}
' + + ' ' + + '{{bio}}
' + '' +
' ' +
' Close Bio' +
' ' +
'
' +
- '<display> 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, show-properties.js, and add the following:
- .code-box
- pre.prettyprint.linenums.lang-javascript(data-name="es5")
- code.
- // ES5
- function DisplayComponent() {
- this.myName = "Alice";
- }
- DisplayComponent.annotations = [
- new angular.Component({
- selector: "display"
- }),
- new angular.View({
- template:
- '<p>My name: {{ myName }}</p>',
- directives: [angular.For, angular.If]
- })
- ];
+ code-tabs
+ code-pane(language="javascript" name="ES5" format="linenums" escape="html").
+ // ES5
+ function DisplayComponent() {
+ this.myName = "Alice";
+ }
+ DisplayComponent.annotations = [
+ new angular.Component({
+ selector: "display"
+ }),
+ new angular.View({
+ template:
+ My name: {{ myName }}
, + directives: [angular.For, angular.If] + }) + ]; - pre.prettyprint.linenums.lang-typescript(data-name="typescript") - code. - // TypeScript - import {Component, View, bootstrap, For} from 'angular2/angular2'; + code-pane(language="javascript" name="TypeScript" format="linenums" escape="html"). + // TypeScript + import {Component, View, bootstrap, For} from 'angular2/angular2'; - @Component({ - selector: 'display' - }) - @View({ - template: ` - <p>My name: {{ myName }}</p> - `, - directives: [For] - }) - class DisplayComponent { - myName: string; - todos: Array<string>; + @Component({ + selector: 'display' + }) + @View({ + template: `<p>My name: {{ myName }}</p>`, + directives: [For] + }) + class DisplayComponent { + myName: string; + todos: Array<string> - constructor() { - this.myName = "Alice"; - } - } + constructor() { + 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. - <p>My name: {{ myName }}</p> + + code-example(language="html" escape="html"). +My name: {{ myName }}
p. Angular will automatically pull the value ofmyName and insert it into the browser and
@@ -98,16 +95,16 @@
just one property, myName.
.callout.is-helpful
- header Note
- p.
- While you've used template: to specify an inline view, for larger templates you'd
- want to move them to a separate file and load them with templateUrl: instead.
+ header Note
+ p.
+ While you've used template: to specify an inline view, for larger templates you'd
+ want to move them to a separate file and load them with templateUrl: instead.
p So you can see Angular dynamically update content, add a line after
- pre.prettyprint.lang-html
- code.
- <p>My name: {{ myName }}</p>
+ code-example(language="html" escape="html").
+ My name: {{ myName }}
+ 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. - //ES5 - function DisplayComponent() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } - pre.prettyprint.lang-typescript(data-name="typescript") - code. - //Typescript - constructor() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } + + code-tabs + code-pane(language="javascript" name="ES5" format="linenums" escape="html"). + //ES5 + function DisplayComponent() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + code-pane(language="javascript" name="TypeScript" format="linenums" escape="html"). + //Typescript + constructor() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + p. You can then use this array in your template with thefor 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:
- '<p>My name: {{ myName }}</p>' +
- '<p>Friends:</p>' +
- '<ul>' +
- '<li *for="#name of names">' +
- '{{ name }}' +
- '</li>' +
- '</ul>',
- pre.prettyprint.lang-typescript(data-name="typescript")
- code.
- //Typescript
- template: `
- <p>My name: {{ myName }}</p>
- <p>Friends:</p>
- <ul>
- <li *for="#name of names">
- {{ name }}
- </li>
- </ul>
- `,
+ code-tabs
+ code-pane(language="javascript" name="ES5" format="linenums").
+ //ES5
+ template:
+ '<p>My name: {{ myName }}</p>' +
+ '<p>Friends:</p>' +
+ '<ul>' +
+ '<li *for="#name of names">' +
+ '{{ name }}' +
+ '</li>' +
+ '</ul>',
+ code-pane(language="javascript" name="TypeScript" format="linenums").
+ //Typescript
+ template: `
+ <p>My name: {{ myName }}</p>
+ <p>Friends:</p>
+ <ul>
+ <li *for="#name of names">
+ {{ name }}
+ </li>
+ </ul>
+ `,
+
p.
To make this work, you'll also need to add the angular.For directive used by the template so
that Angular knows to include it:
- .code-box
- pre.prettyprint.lang-javascript(data-name="es5")
- code.
- //ES5
- directives: [angular.For]
- pre.prettyprint.lang-typescript(data-name="typescript")
- code.
- //Typescript
- import {Component, View, bootstrap, For} from
- ...
- directives: [For]
+ code-tabs
+ code-pane(language="javascript" name="ES5" format="linenums").
+ //ES5
+ directives: [angular.For]
+ code-pane(language="javascript" name="TypeScript" format="linenums").
+ //Typescript
+ import {Component, View, bootstrap, For} from
+ ...
+ 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
diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
index 484f9a4716..1a94ffb121 100644
--- a/public/resources/js/controllers/app-controller.js
+++ b/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) {
- event.preventDefault();
+ $scope.toggleDocsMenu = function() {
$scope.showDocsNav = !$scope.showDocsNav;
};
// TOGGLE DOCS NAV
- $scope.toggleMainMenu = function(event) {
- event.preventDefault();
+ $scope.toggleMainMenu = function() {
$scope.showMainNav = !$scope.showMainNav;
};
// TOGGLE DOCS VERSION & LANGUAGE
- $scope.toggleVersionMenu = function(event) {
- event.preventDefault();
+ $scope.toggleVersionMenu = function() {
$scope.showMenu = !$scope.showMenu;
};
diff --git a/public/resources/js/directives/bio.js b/public/resources/js/directives/bio.js
index 5ab54a1d2a..28f5daef19 100644
--- a/public/resources/js/directives/bio.js
+++ b/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');
- scope.bio = element.attr('data-bio');
- scope.pic = element.attr('data-pic');
- scope.twitter = element.attr('data-twitter');
- scope.website = element.attr('data-website');
- scope.$twitter = scope.twitter !== 'undefined' ? 'Twitter' : '';
- scope.$website = scope.website !== 'undefined' ? 'Website' : '';
+ // SET SCOPE VALUES
+ scope.name = attrs.name;
+ scope.pic = attrs.pic;
+ scope.bio = attrs.bio;
+ scope.twitter = attrs.twitter;
+ scope.website = attrs.website;
+ // 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:
'' + scope.bio + '
' + + '{{bio}}
' + '