Merge branch 'akosbordas-reload-tabs-manually'

krescruz · Jun 17, 2016 · c1a3987 · c1a3987
2 parents 228c7c3 + 280ced1
commit c1a3987
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -797,6 +797,7 @@ <h2 class="header">Tabs</h2>
             <p>This is a very simple directive, that just calls the jQuery plugin when the element is initialized.</p>
             <p>For the styling to work, you still need to have the class <code class="language-markup">tabs</code> on the <code class="language-markup">ul</code> tag</p>
             <p>Because of the simple implementation, don't expect ng-repeat ng-model or similar to work inside the ul of the tabs (should work inside the content though).</p>
+            <p>It is possible to trigger reload of tabs manually with a simple boolean property on your scope. It can be useful when you want to load your content dynamically with <code class="language-markup">ng-include</code> or so.</p>
             <a class="btn waves-effect waves-light" ng-click="showTabs = !showTabs">Show/hide the below tabs</a>
         </div>
         <div class="row" ng-if="showTabs">
@@ -817,7 +818,7 @@ <h2 class="header">Tabs</h2>
 <pre><code class="language-markup" ng-non-bindable>
 &lt;div class="row" ng-if="showTabs"&gt;
     &lt;div class="col s12"&gt;
-        &lt;ul tabs&gt;
+        &lt;ul tabs reload="allTabContentLoaded"&gt;
             &lt;li class="tab col s3"&gt;&lt;a href="#test1"&gt;Test 1&lt;/a&gt;&lt;/li&gt;
             &lt;li class="tab col s3"&gt;&lt;a class="active" href="#test2"&gt;Test 2&lt;/a&gt;&lt;/li&gt;
             &lt;li class="tab col s3"&gt;&lt;a href="#test3"&gt;Test 3&lt;/a&gt;&lt;/li&gt;

diff --git a/src/angular-materialize.js b/src/angular-materialize.js
@@ -234,16 +234,26 @@
         }]);
 
     angular.module("ui.materialize.tabs", [])
-        .directive("tabs", ["$timeout", function($timeout){
-            return {
-                link: function (scope, element, attrs) {
-                    element.addClass("tabs");
-                    $timeout(function() {
-                        element.tabs();
-                    });
-                }
-            };
-        }]);
+      .directive("tabs", ["$timeout", function($timeout){
+          return {
+              scope: {
+                  reload: '='
+              },
+              link: function (scope, element, attrs) {
+                  element.addClass("tabs");
+                  $timeout(function() {
+                      element.tabs();
+                  });
+
+                  scope.$watch('reload', function(newValue) {
+                      if (newValue === true) {
+                          element.tabs();
+                          scope.reload = false;
+                      }
+                  });
+              }
+          };
+      }]);
 
     // Example: <a href="#" data-activates="nav-mobile" class="button-collapse top-nav" data-sidenav="left" data-menuwidth="500"  data-closeonclick="true">
     // data-activates is handled by the jQuery plugin.