added branch 'zippy_directive'. (transclusion, ng-show, templates)

chrisg220 · chrisg220 · commit f7303caaa82f · 2013-08-11T19:53:11.000-07:00
diff --git a/egghead/index.html b/egghead/index.html
@@ -3,17 +3,29 @@
 <head>
   <meta charset="utf-8">
   <title>Angular</title>
-  <style type="text/css">
-    .button { border: solid 1px blue; }
-  </style>
+
+  <link rel="stylesheet" href="css/style.css">
+
 </head>
 <body>
+  <h1>Angular</h1>
 
   <div ng-app="app">
-    <div ng-controller="MyCtrl">
-    </div>
+
+    <input type="text" ng-model="model.prop1"> <br/>
+    <input type="text" ng-model="model.prop2"> <br/>
+    <input type="text" ng-model="model.prop3">
+
+    <zippy attrfoo="{{model.prop1}}" attrbar="{{model.prop2}}">     <!-- grabs data from chrisProp -->
+      <!-- NOTE: content that is transcluded has access to parent scope.
+           This is how model.content is available to the view
+      -->
+      <p>Third input is : "{{model.prop3}}". First input is "{{model.prop1}}".</p>
+    </zippy>
+
   </div>
 
+
   <script src="js/angular.js"></script>
   <script src="js/app.js"></script>
 
diff --git a/egghead/js/app.js b/egghead/js/app.js
@@ -1,18 +1,31 @@
 // Define an App
 var app = angular.module('app', []);
 
-// Declaring dependencies before function() protects against minification variable collision.
-// Dependencies are injected in the same order they are declared.
-app.controller('MyCtrl', ['$scope', '$http', function(a, b) {
-  console.log(b);
-}]);
-
-app.directive('myDirective', function($http, $parse) {
+app.directive('zippy', function() {
   return {
-    link: function(scope, elem, attrs) {
-      console.log(scope)
+    restrict: 'E',
+    transclude: true,
+    scope: {
+      attrfoo: '@',
+      attrbar: '@'
+    },
+    template: '<div>' +
+                '<h3 ng-click="toggleContent()"> First input is: {{attrfoo}} </h3><br/>' +
+                  'Second input is: {{attrbar}} <br/>' +
+                '<div ng-click="myFunc()" ng-show="isContentVisible" ng-transclude> </div>' +
+              '</div>',
+
+    link: function(scope) {
+      scope.isContentVisible = false;
+
+      scope.toggleContent = function() {
+        scope.isContentVisible = !scope.isContentVisible;
+        console.log('toggleContent Fired');
+      };
+
+      scope.myFunc = function() {
+        console.log('myfunct Fired')
+      };
     }
   };
 });
-
-
