Merge pull request #16 from redsoul/master

placeholders were not correctly loading

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+bower_components/
 coverage/
 .idea/
 *.iml

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.2.1
+### Bug Fixes
+placeholders were not correctly loading with lazy-hide parameter on lazy-module directive
+
 # 1.2.0
 ### Features
 lazy-hide parameter on lazy-module directive

dist/ng-lazy-render.js

@@ -22,7 +22,7 @@ angular.module('ngLazyRender', []);
 angular.module('ngLazyRender').directive('lazyModule', ['$animate', '$compile', '$parse', '$q', '$templateCache', 'VisibilityService', function ($animate, $compile, $parse, $q, $templateCache, VisibilityService) {
     'use strict';
 
-    var hidePlaceholder = function hidePlaceholder($transclude, scope, placeholderElem, moduleElem, finallyCb) {
+    var removePlaceholder = function removePlaceholder($transclude, scope, placeholderElem, moduleElem, finallyCb) {
         // If the function is called after the scope is destroyed (more than once),
         // we should do nothing.
         if (scope === null) {
@@ -66,9 +66,15 @@ angular.module('ngLazyRender').directive('lazyModule', ['$animate', '$compile',
             var watcher = void 0;
 
             if ($attr.lazyHide) {
+                //load the placeholder
+                $animate.enter(el, $element.parent(), $element).then(function () {
+                    $compile(el)(isolateScope);
+                });
+
+                //watch lazyHide attribute, when true remove the placeholder, show the module and remove the watch
                 watcher = $scope.$watch($attr.lazyHide, function (value) {
                     if (!!value) {
-                        hidePlaceholder($transclude, isolateScope, el, $element, watcher);
+                        removePlaceholder($transclude, isolateScope, el, $element, watcher);
                     }
                 });
             } else {
@@ -77,7 +83,7 @@ angular.module('ngLazyRender').directive('lazyModule', ['$animate', '$compile',
                 // the actual transcluded content.
                 isolateScope.showModule = function () {
                     $scope.$applyAsync(function () {
-                        hidePlaceholder($transclude, isolateScope, el, $element);
+                        removePlaceholder($transclude, isolateScope, el, $element);
                     });
                 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-lazy-render",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A set of directives to postpone your angular application from rendering elements outside the viewport.",
   "contributors": ["Andre Duarte <[email protected]>", "Joao Pereira <[email protected]>"],
   "main": "./dist/ng-lazy-render.js",

src/lazy-module-directive.js

@@ -67,6 +67,12 @@ angular.module(`ngLazyRender`).directive(`lazyModule`, [
                 let watcher;
 
                 if ($attr.lazyHide) {
+                    //load the placeholder
+                    $animate.enter(el, $element.parent(), $element).then(() => {
+                        $compile(el)(isolateScope)
+                    })
+
+                    //watch lazyHide attribute, when true remove the placeholder, show the module and remove the watch
                     watcher = $scope.$watch($attr.lazyHide, (value) => {
                         if (!!value) {
                             removePlaceholder($transclude, isolateScope, el, $element, watcher)

tests/lazy-module-directive-spec.js

@@ -76,17 +76,15 @@ describe(`lazyModule directive`, () => {
 
         // After compiling the directive we should no longer be able to see the content
         expect(el.find('module').length).toBe(0)
-
-        // Also, we should now see the placeholder (article) and it should have its own scope
-        var lazyScope = el.find('placeholder').scope()
-        expect(lazyScope).not.toBe(initialScope)
+        // the placeholder should be visible
+        expect(el.find('placeholder').length).toBe(1)
 
         $rootScope.hidePlaceholder = true
         initialScope.$digest()
         // Now the placeholder should not be visible anymore
         expect(el.find('placeholder').length).toBe(0)
 
         // And the module should be visible again
-        expect(el.find('module').length).not.toBe(0)
+        expect(el.find('module').length).toBe(1)
     })
 })