feat: happyPostDirective에서 메뉴를 다이나믹하게 upgrade하는 것 구현

참고: jadjoubran/angular-material-design-lite#4
kyoungrok0517 · Feb 28, 2016 · d73c546 · d73c546
1 parent 68fad7a
commit d73c546
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -60,6 +60,7 @@
 
     <!-- AngularJS -->
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
 
     <!-- Firebase -->
     <script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
@@ -70,7 +71,6 @@
 
     <!-- My -->
     <script src="./media/js/index.js"></script>
-    <script src="./node_modules/ngstorage/ngStorage.min.js"></script>
 </head>
 
 <body ng-app="app" class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
@@ -188,7 +188,7 @@ <h3>Write New Post</h3>
 
 
                     <!-- Posts -->
-                    <div happy-post ng-repeat="post in posts"></div>
+                    <div ng-repeat="post in posts" happy-post-directive></div>
                 </div>
             </div>
 

diff --git a/media/js/index.js b/media/js/index.js
@@ -81,18 +81,17 @@ angular.module("app", ["firebase", "ngStorage"])
         }
     })
 
-    .directive('happyPost', function ($log) {
+    .directive('happyPostDirective', function ($log) {
         return {
             restrict: 'A',
             templateUrl: "templates/happy-post.html",
             replace: true,
-            controller: function($scope, $element, $attrs, $transclude) {
-                // var menus = $element.find('ul');
-                // componentHandler.upgradeElements(menus);
+            link: function (scope, element, attrs) {
+                if (scope.$last === true) {
+                    element.ready(function () {
+                        componentHandler.upgradeAllRegistered()
+                    });
+                }
             }
-            // link: function (scope, element, attrs) {
-            //     var menus = element.find('ul');
-            //     componentHandler.upgradeElements(menus);
-            // }
         }
     })
diff --git a/templates/happy-post.html b/templates/happy-post.html
@@ -4,8 +4,10 @@ <h1 class="mdl-card__title-text">{{ post.email }}</h1>
     </div>
     <div class="mdl-card__menu">
         <!-- Right aligned menu below button -->
-        <button id="menu-edit-{{$index}}" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button>
-        <ul class="menu-edit mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu-edit-{{$index}}">
+        <button id="menu-edit-{{$index}}" class="mdl-button mdl-js-button mdl-button--icon">
+            <i class="material-icons">more_vert</i>
+        </button>
+        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu-edit-{{$index}}">
             <li class="mdl-menu__item">Edit</li>
             <li class="mdl-menu__item">Delete</li>
         </ul>