hello.component.js: Add a button that prints the name to the console

Clicking on the button prints the current name to the console. Normally
you wouldn't include the debug console in the controller scope, but this
is here as an example to illustrate the action. The window isn't
available to the controller's scope, it only includes what it defines on
its scope.

1 files changed, 7 insertions, 1 deletions

diff --git a/app/assets/javascripts/hello/hello.component.js b/app/assets/javascripts/hello/hello.component.js
index 056cd39..366e5d5 100644
--- a/app/assets/javascripts/hello/hello.component.js
+++ b/app/assets/javascripts/hello/hello.component.js
@@ -5,9 +5,15 @@
         .component('hello',  {
             template:
                 '<h2>Hello {{ $ctrl.name }}</h2>' +
-                '<input type="text" ng-model="$ctrl.name" />',
+                '<div>' +
+                    '<input type="text" ng-model="$ctrl.name" />' +
+                '</div>' +
+                '<div>' +
+                    '<button ng-click="$ctrl.console.log($ctrl.name)">Print to console</button>' +
+                '</div>',
             controller: function() {
                 this.name = '';
+                this.console = window.console;
             }
         });