2.9 to 2.12: using the link function on directives to manipulate the DOM. Avoiding escaping.

.idea/workspace.xml

@@ -2,10 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="179343f7-015f-440a-93a8-15155b9f2a03" name="Default" comment="">
+      <change beforePath="" afterPath="$PROJECT_DIR$/css/style.css" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+      <change beforePath="$PROJECT_DIR$/index.html" afterPath="$PROJECT_DIR$/index.html" />
       <change beforePath="$PROJECT_DIR$/js/directives/nw-card.js" afterPath="$PROJECT_DIR$/js/directives/nw-card.js" />
+      <change beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
       <change beforePath="$PROJECT_DIR$/templates/directives/nw-card.html" afterPath="$PROJECT_DIR$/templates/directives/nw-card.html" />
-      <change beforePath="$PROJECT_DIR$/templates/pages/notes/notes.html" afterPath="$PROJECT_DIR$/templates/pages/notes/notes.html" />
+      <change beforePath="$PROJECT_DIR$/yarn.lock" afterPath="$PROJECT_DIR$/yarn.lock" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -57,7 +60,6 @@
         <option value="$PROJECT_DIR$/users-index.html" />
         <option value="$PROJECT_DIR$/templates/pages/users/users-index.html" />
         <option value="$PROJECT_DIR$/js/app.js" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/notes" />
         <option value="$PROJECT_DIR$/.eslintrc.yml" />
         <option value="$PROJECT_DIR$/notes.json" />
@@ -70,8 +72,10 @@
         <option value="$PROJECT_DIR$/templates/pages/notes/show.html" />
         <option value="$PROJECT_DIR$/js/routes.js" />
         <option value="$PROJECT_DIR$/templates/pages/notes/notes.html" />
-        <option value="$PROJECT_DIR$/js/directives/nw-card.js" />
+        <option value="$PROJECT_DIR$/css/style.css" />
+        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/templates/directives/nw-card.html" />
+        <option value="$PROJECT_DIR$/js/directives/nw-card.js" />
       </list>
     </option>
   </component>
@@ -141,6 +145,11 @@
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
               <item name="ng-codeschool-2" type="2a2b976b:PhpTreeStructureProvider$1" />
             </path>
+            <path>
+              <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool-2" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="css" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
             <path>
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
               <item name="ng-codeschool-2" type="2a2b976b:PhpTreeStructureProvider$1" />
@@ -158,6 +167,24 @@
               <item name="js" type="2a2b976b:PhpTreeStructureProvider$1" />
               <item name="directives" type="2a2b976b:PhpTreeStructureProvider$1" />
             </path>
+            <path>
+              <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool-2" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="node_modules" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
+            <path>
+              <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool-2" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="node_modules" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="markdown" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
+            <path>
+              <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
+              <item name="ng-codeschool-2" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="node_modules" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="markdown" type="2a2b976b:PhpTreeStructureProvider$1" />
+              <item name="lib" type="2a2b976b:PhpTreeStructureProvider$1" />
+            </path>
             <path>
               <item name="CodeSchool Angular 2" type="b2602c69:ProjectViewProjectNode" />
               <item name="ng-codeschool-2" type="2a2b976b:PhpTreeStructureProvider$1" />
@@ -249,7 +276,7 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="13510000" />
+    <option name="totallyTimeSpent" value="14422000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1676" height="1027" extended-state="6" />
@@ -690,34 +717,58 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/templates/directives/nw-card.html">
+    <entry file="file://$PROJECT_DIR$/templates/pages/notes/notes.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="105">
+          <caret line="7" column="39" lean-forward="false" selection-start-line="7" selection-start-column="39" selection-end-line="7" selection-end-column="39" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/css/style.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="75">
+          <caret line="5" column="15" lean-forward="false" selection-start-line="5" selection-start-column="15" selection-end-line="5" selection-end-column="15" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/css/application.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/markdown/lib/markdown.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="4" column="0" lean-forward="true" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
+        <state relative-caret-position="225">
+          <caret line="15" column="73" lean-forward="true" selection-start-line="15" selection-start-column="73" selection-end-line="15" selection-end-column="73" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/js/directives/nw-card.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="240">
-          <caret line="16" column="58" lean-forward="false" selection-start-line="16" selection-start-column="58" selection-end-line="16" selection-end-column="58" />
+        <state relative-caret-position="555">
+          <caret line="37" column="0" lean-forward="true" selection-start-line="37" selection-start-column="0" selection-end-line="37" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/templates/pages/notes/notes.html">
+    <entry file="file://$PROJECT_DIR$/templates/directives/nw-card.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="105">
-          <caret line="7" column="39" lean-forward="false" selection-start-line="7" selection-start-column="39" selection-end-line="7" selection-end-column="39" />
+        <state relative-caret-position="90">
+          <caret line="6" column="50" lean-forward="false" selection-start-line="6" selection-start-column="50" selection-end-line="6" selection-end-column="50" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="529">
-          <caret line="37" column="25" lean-forward="true" selection-start-line="37" selection-start-column="4" selection-end-line="37" selection-end-column="25" />
+        <state relative-caret-position="690">
+          <caret line="46" column="58" lean-forward="false" selection-start-line="46" selection-start-column="58" selection-end-line="46" selection-end-column="58" />
           <folding />
         </state>
       </provider>

css/style.css

@@ -0,0 +1,7 @@
+.card {
+  position: relative;
+}
+
+.card p.hidden {
+  display: none;
+}

index.html

@@ -5,6 +5,7 @@
     <title>NoteWrangler</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="css/application.css" />
+    <link rel="stylesheet" href="css/style.css" />
   </head>
 
   <body>
@@ -43,6 +44,7 @@
     <script src="./node_modules/angular/angular.js"></script>
     <script src="./node_modules/angular-route/angular-route.js"></script>
     <script src="./node_modules/angular-resource/angular-resource.js"></script>
+    <script src="./node_modules/markdown/lib/markdown.js"></script>
 
     <script src="./js/app.js"></script>
     <script src="./js/routes.js"></script>

js/directives/nw-card.js

@@ -1,8 +1,20 @@
 angular.module("noteWrangler")
-  .directive('nwCard', function () {
+// $sce : Strict Contextual Escaping service.
+  .directive('nwCard', function ($sce) {
     return {
-      retrict: "E", // "E" is for Element.
-      templateUrl: "templates/directives/nw-card.html",
+      /* Runs after the directive has been compiled is is ready. Best spot to do
+      any DOM manipulation or logic functionality for a directive.
+
+      - "element" is the outermost element for the directive (div.card in nw-card.html)
+      - "attrs" are the attributes set on "element": here "header" and "description"
+       */
+      link: function (scope, element, attrs) {
+        scope.body = $sce.trustAsHtml(markdown.toHTML(scope.body));
+        element("div.card").on("click", function () {
+          element("div.card p").toggleClass("hidden");
+        });
+      },
+      restrict: "E", // "E" is for Element.
       /* By default, directives have "scope: false": they inherit from their
       parents, so setting properties on the scope actually sets them on the
       parent scope. Setting the scope to a non empty value creates an isolated
@@ -20,5 +32,6 @@ angular.module("noteWrangler")
         header: "=",
         icon: "=",
       },
+      templateUrl: "templates/directives/nw-card.html",
     }
   });

package.json

@@ -14,6 +14,7 @@
     "angular-resource": "^1.6.7",
     "angular-route": "^1.6.7",
     "jquery": "^3.2.1",
+    "markdown": "^0.5.0",
     "material-design-icons": "^3.0.1"
   }
 }

templates/directives/nw-card.html

@@ -1,4 +1,10 @@
 <div class="card">
   <h2 class="h3">{{ header }}</h2>
   <i class="icon icon-card {{ icon }}"></i>
+  <p class="hidden">{{ description }}</p>
+  <div class="card-hidden">
+    <!-- avoid the escaping which would happen with:
+    <a ng-href="#/notes/{{id}}">{{ body }}</a> -->
+    <a ng-href="#/notes/{{id}}" ng-bind-html="body"></a>
+  </div>
 </div>

yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
@@ -632,6 +636,12 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+markdown@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/markdown/-/markdown-0.5.0.tgz#28205b565a8ae7592de207463d6637dc182722b2"
+  dependencies:
+    nopt "~2.1.1"
+
 material-design-icons@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf"
@@ -675,6 +685,12 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+nopt@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-2.1.2.tgz#6cccd977b80132a07731d6e8ce58c2c8303cf9af"
+  dependencies:
+    abbrev "1"
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"