angular-observe - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0

dist/angular-observe.js

@@ -63,17 +63,20 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	mod.directive('observe', ['$compile', '$timeout', function ($compile, $timeout) {
+	mod.directive('asyncBind', ['$compile', '$q', '$rootScope', '$timeout', function ($compile, $q, $rootScope, $timeout) {
 	    return {
 	        restrict: 'EA',
 	        scope: true,
-	        transclude: {
-	            loading: '?loading',
-	            active: '?active',
-	            complete: '?complete',
-	            error: '?error',
-	        },
-	        link: function ($scope, $element, $attrs, ctl, $transclude) {
+	        compile: compile,
+	    };
+	    
+	    function compile(tElement) {
+	        var stateLinkFunctions = getStateLinkFunctions(tElement);
+	        
+	        return function postLink($scope, $element, $attrs) {
+	            var childScope;
 	            var currentState;
-	            var stateLinkFunctions = {};
+	            var isolateScope = $rootScope.$new(true, $scope);
 	            var source = $scope.$eval($attrs.observe || $attrs.source);
 	            
+	            $element.empty();
+	            
 	            if (!source) {
@@ -84,15 +87,4 @@ console.warn('The `observable` directive requires a source observable.');
 	            
-	            $transclude(compileState.bind(null, 'active', false), null, '');
-	            $transclude(compileState.bind(null, 'loading', true), null, 'loading');
-	            $transclude(compileState.bind(null, 'active', true), null, 'active');
-	            $transclude(compileState.bind(null, 'complete', true), null, 'complete');
-	            $transclude(compileState.bind(null, 'error', true), null, 'error');
+	            setState('loading');
 	            
-	            if (!stateLinkFunctions.active) {
-	                console.warn('The `observable` directive requires at least one child element.');
-	                return;
-	            }
-	            
-	            setState('loading', true);
-	            
 	            // Subscribe to the observable
@@ -105,3 +97,3 @@ var observable = typeof source.subscribe === 'function'
 	            var subscription = observable.subscribe(onNext, onError, onComplete);
-
+	    
 	            // Unsubscribe when this element is destroyed
@@ -113,5 +105,16 @@ $scope.$on('$destroy', function() {
 	            function onNext(val) {
-	                $scope.$value = val;
-
-	                setState('active');
+	                var forceLink = !isPrimitive(isolateScope.$value)
+	                    || !isPrimitive(val);
+	                
+	                isolateScope.$value = val;
+	    
+	                setState('active', forceLink);
+	                
+	                function isPrimitive(object) {
+	                    var type = typeof object;
+	                    
+	                    return type === 'boolean'
+	                        || type === 'number'
+	                        || type === 'string';
+	                }
 	            }
@@ -124,72 +127,116 @@
 	            function onError(error) {
-	                $scope.$error = error;
+	                isolateScope.$error = error;
+	                
 	                setState('error');
 	            }
 	            
-	            function compileState(state, useContents, clone) {
-	                var contents = useContents
-	                    ?   clone.contents()
-	                    :   clone;
-	                
-	                if (contents.length) {
-	                    var linkFunction = $compile(contents);
-	                
-	                    stateLinkFunctions[state] = linkFunction;
-	                }
-	            }
-	            
-	            function liftPromise(source) {
-	                return {
-	                    subscribe: function (onNext, onError, onComplete) {
-	                        source.then(onNext, onError, onNext)
-	                            .catch(function (reason) {
-	                                return reason;
-	                            })
-	                            .then(onComplete);
-	                        
-	                        return {
-	                            unsubscribe: Angular.noop,
-	                        };
-	                    }
-	                };
-	            }
-	            
-	            function liftValue(source) {
-	                return {
-	                    subscribe: function (onNext, onError, onComplete) {
-	                        $timeout(onNext.bind(null, source), 0, false)
-	                            .then(onComplete);
-	                        
-	                        return {
-	                            unsubscribe: Angular.noop,
-	                        };
-	                    }
-	                };
-	            }
-	            
-	            function setState(state, skipDigest) {
-	                if (state !== currentState) {
+	            function setState(state, forceLink) {
+	                if (forceLink || state !== currentState) {
 	                    var linkFunction = stateLinkFunctions[state];
 	                    
-	                    $element.empty();
+	                    if (childScope) {
+	                        childScope.$destroy();
+	                    }
 	                    
+	                    
 	                    if (!linkFunction) {
+	                        $element.empty();
 	                        return;
 	                    }
 	                    
-	                    var replacement = linkFunction($scope);
+	                    childScope = isolateScope.$new();
+	                    currentState = state;
 	                    
-	                    $element.append(replacement);
-	                    
-	                    currentState = state;
+	                    linkFunction(childScope, function (clone) {
+	                        $element.empty();
+	                        $element.append(clone);
+	                    });
 	                }
 	                
-	                if (!skipDigest && !$scope.$root.$$phase) {
-	                    $scope.$digest(true);
+	                if (!isolateScope.$root.$$phase) {
+	                    isolateScope.$digest(true);
 	                }
 	            }
+	        };
+	    }
+	    
+	    function liftPromise(source) {
+	        return {
+	            subscribe: function (onNext, onError, onComplete) {
+	                source.then(onNext, onError, onNext)
+	                    .catch(function (reason) {
+	                        return reason;
+	                    })
+	                    .then(onComplete);
+	                
+	                return {
+	                    unsubscribe: Angular.noop,
+	                };
+	            }
+	        };
+	    }
+	    
+	    function liftValue(source) {
+	        return {
+	            subscribe: function (onNext, onError, onComplete) {
+	                $timeout(onNext.bind(null, source), 0, false)
+	                    .then(onComplete);
+	                
+	                return {
+	                    unsubscribe: Angular.noop,
+	                };
+	            }
+	        };
+	    }
+
+
+	    function getStateLinkFunctions(tElement) {
+	        var stateLinkFunctions = {};
+	        var stateTemplates = {
+	            loading: [],
+	            active: [],
+	            error: [],
+	            complete: [],
+	        };
+	        var template = [];
+	        
+	        Angular.forEach(tElement.contents(), function (node) {
+	            switch (node.nodeName.toLowerCase()) {
+	                case 'loading': return stateTemplates.loading.push(node);
+	                case 'active': return stateTemplates.active.push(node);
+	                case 'error': return stateTemplates.error.push(node);
+	                case 'complete': return stateTemplates.complete.push(node);
+	                default: return template.push(node);
+	            }
+	        });
+	        
+	        var hasStateTemplates = false;
+	        
+	        Angular.forEach(stateTemplates, function (template, state) {
+	            if (template.length) {
+	                hasStateTemplates = true;
+	                
+	                var clone = Angular.element(template).clone();
+	                
+	                stateLinkFunctions[state] = $compile(clone);
+	            }
+	        });
+	        
+	        if (!hasStateTemplates) {
+	            if (!template.length) {
+	                template.push(document.createTextNode('{{$value}}'));
+	            }
+	                
+	            var clone = Angular.element(template).clone();
+	            
+	            stateLinkFunctions.active = $compile(clone);
+	            stateLinkFunctions.complete = $compile(clone.clone());
 	        }
-	    };
+	        
+	        return stateLinkFunctions;
+	    }
+
 	}]);
 
+
 /***/ },
@@ -196,0 +243,0 @@ /* 1 */

dist/angular-observe.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("angular")):"function"==typeof define&&define.amd?define(["angular"],n):"object"==typeof exports?exports.AngularObserve=n(require("angular")):e.AngularObserve=n(e.angular)}(this,function(e){return function(e){function n(t){if(r[t])return r[t].exports;var o=r[t]={exports:{},id:t,loaded:!1};return e[t].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var r={};return n.m=e,n.c=r,n.p="",n(0)}([function(e,n,r){var t=r(1);e.exports="filearts.angularObserve";var o=t.module(e.exports,[]);o.directive("observe",["$compile","$timeout",function(e,n){return{restrict:"EA",scope:!0,transclude:{loading:"?loading",active:"?active",complete:"?complete",error:"?error"},link:function(r,o,i,u,c){function l(e){r.$value=e,p("active")}function a(e){p("complete")}function s(e){r.$error=e,p("error")}function f(n,r,t){var o=r?t.contents():t;if(o.length){var i=e(o);g[n]=i}}function b(e){return{subscribe:function(n,r,o){return e.then(n,r,n)["catch"](function(e){return e}).then(o),{unsubscribe:t.noop}}}}function d(e){return{subscribe:function(r,o,i){return n(r.bind(null,e),0,!1).then(i),{unsubscribe:t.noop}}}}function p(e,n){if(e!==v){var t=g[e];if(o.empty(),!t)return;var i=t(r);o.append(i),v=e}n||r.$root.$$phase||r.$digest(!0)}var v,g={},m=r.$eval(i.observe||i.source);if(!m)return void console.warn("The `observable` directive requires a source observable.");if(c(f.bind(null,"active",!1),null,""),c(f.bind(null,"loading",!0),null,"loading"),c(f.bind(null,"active",!0),null,"active"),c(f.bind(null,"complete",!0),null,"complete"),c(f.bind(null,"error",!0),null,"error"),!g.active)return void console.warn("The `observable` directive requires at least one child element.");p("loading",!0);var x="function"==typeof m.subscribe?m:"function"==typeof m.then?b(m):d(m),h=x.subscribe(l,s,a);r.$on("$destroy",function(){h.unsubscribe()})}}}])},function(n,r){n.exports=e}])});
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("angular")):"function"==typeof define&&define.amd?define(["angular"],r):"object"==typeof exports?exports.AngularObserve=r(require("angular")):e.AngularObserve=r(e.angular)}(this,function(e){return function(e){function r(t){if(n[t])return n[t].exports;var o=n[t]={exports:{},id:t,loaded:!1};return e[t].call(o.exports,o,o.exports,r),o.loaded=!0,o.exports}var n={};return r.m=e,r.c=n,r.p="",r(0)}([function(e,r,n){var t=n(1);e.exports="filearts.angularObserve";var o=t.module(e.exports,[]);o.directive("asyncBind",["$compile","$q","$rootScope","$timeout",function(e,r,n,o){function u(e){var r=a(e);return function(e,t,o){function u(e){function r(e){var r=typeof e;return"boolean"===r||"number"===r||"string"===r}var n=!r(v.$value)||!r(e);v.$value=e,f("active",n)}function a(e){f("complete")}function s(e){v.$error=e,f("error")}function f(e,n){if(n||e!==p){var o=r[e];if(l&&l.$destroy(),!o)return void t.empty();l=v.$new(),p=e,o(l,function(e){t.empty(),t.append(e)})}v.$root.$$phase||v.$digest(!0)}var l,p,v=n.$new(!0,e),d=e.$eval(o.observe||o.source);if(t.empty(),!d)return void console.warn("The `observable` directive requires a source observable.");f("loading");var b="function"==typeof d.subscribe?d:"function"==typeof d.then?c(d):i(d),m=b.subscribe(u,s,a);e.$on("$destroy",function(){m.unsubscribe()})}}function c(e){return{subscribe:function(r,n,o){return e.then(r,n,r)["catch"](function(e){return e}).then(o),{unsubscribe:t.noop}}}}function i(e){return{subscribe:function(r,n,u){return o(r.bind(null,e),0,!1).then(u),{unsubscribe:t.noop}}}}function a(r){var n={},o={loading:[],active:[],error:[],complete:[]},u=[];t.forEach(r.contents(),function(e){switch(e.nodeName.toLowerCase()){case"loading":return o.loading.push(e);case"active":return o.active.push(e);case"error":return o.error.push(e);case"complete":return o.complete.push(e);default:return u.push(e)}});var c=!1;if(t.forEach(o,function(r,o){if(r.length){c=!0;var u=t.element(r).clone();n[o]=e(u)}}),!c){u.length||u.push(document.createTextNode("{{$value}}"));var i=t.element(u).clone();n.active=e(i),n.complete=e(i.clone())}return n}return{restrict:"EA",scope:!0,compile:u}}])},function(r,n){r.exports=e}])});

package.json

 {
   "name": "angular-observe",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "Angular directive for representing the different states of an Observable.",
@@ -5,0 +5,0 @@ "main": "./dist/angular-observe.js",

README.md

@@ -8,3 +8,3 @@ # Introducing the `observe` directive
 ```html
-<div observe="observable">
+<div async-bind="observable">
     <loading>Loading...</loading>
@@ -20,3 +20,3 @@ <active>The latest value is: <code>{{$value}}</code>.</active>
 ```html
-<div observe="observable">
+<div async-bind="observable">
     <span>Current value: <code>{{$value}}</code></span>
@@ -42,5 +42,5 @@ </div>
 ```html
-<div observe="observable">
+<div async-bind="observable">
     <active>Currrent value: {{$value}}</active>
 </div>
 ```

src/angular-observe.js

@@ -7,17 +7,20 @@ var Angular = require('angular');
 
-mod.directive('observe', ['$compile', '$timeout', function ($compile, $timeout) {
+mod.directive('asyncBind', ['$compile', '$q', '$rootScope', '$timeout', function ($compile, $q, $rootScope, $timeout) {
     return {
         restrict: 'EA',
         scope: true,
-        transclude: {
-            loading: '?loading',
-            active: '?active',
-            complete: '?complete',
-            error: '?error',
-        },
-        link: function ($scope, $element, $attrs, ctl, $transclude) {
+        compile: compile,
+    };
+    
+    function compile(tElement) {
+        var stateLinkFunctions = getStateLinkFunctions(tElement);
+        
+        return function postLink($scope, $element, $attrs) {
+            var childScope;
             var currentState;
-            var stateLinkFunctions = {};
+            var isolateScope = $rootScope.$new(true, $scope);
             var source = $scope.$eval($attrs.observe || $attrs.source);
             
+            $element.empty();
+            
             if (!source) {
@@ -28,15 +31,4 @@ console.warn('The `observable` directive requires a source observable.');
             
-            $transclude(compileState.bind(null, 'active', false), null, '');
-            $transclude(compileState.bind(null, 'loading', true), null, 'loading');
-            $transclude(compileState.bind(null, 'active', true), null, 'active');
-            $transclude(compileState.bind(null, 'complete', true), null, 'complete');
-            $transclude(compileState.bind(null, 'error', true), null, 'error');
+            setState('loading');
             
-            if (!stateLinkFunctions.active) {
-                console.warn('The `observable` directive requires at least one child element.');
-                return;
-            }
-            
-            setState('loading', true);
-            
             // Subscribe to the observable
@@ -49,3 +41,3 @@ var observable = typeof source.subscribe === 'function'
             var subscription = observable.subscribe(onNext, onError, onComplete);
-
+    
             // Unsubscribe when this element is destroyed
@@ -57,5 +49,16 @@ $scope.$on('$destroy', function() {
             function onNext(val) {
-                $scope.$value = val;
-
-                setState('active');
+                var forceLink = !isPrimitive(isolateScope.$value)
+                    || !isPrimitive(val);
+                
+                isolateScope.$value = val;
+    
+                setState('active', forceLink);
+                
+                function isPrimitive(object) {
+                    var type = typeof object;
+                    
+                    return type === 'boolean'
+                        || type === 'number'
+                        || type === 'string';
+                }
             }
@@ -68,70 +71,113 @@
             function onError(error) {
-                $scope.$error = error;
+                isolateScope.$error = error;
+                
                 setState('error');
             }
             
-            function compileState(state, useContents, clone) {
-                var contents = useContents
-                    ?   clone.contents()
-                    :   clone;
-                
-                if (contents.length) {
-                    var linkFunction = $compile(contents);
-                
-                    stateLinkFunctions[state] = linkFunction;
-                }
-            }
-            
-            function liftPromise(source) {
-                return {
-                    subscribe: function (onNext, onError, onComplete) {
-                        source.then(onNext, onError, onNext)
-                            .catch(function (reason) {
-                                return reason;
-                            })
-                            .then(onComplete);
-                        
-                        return {
-                            unsubscribe: Angular.noop,
-                        };
-                    }
-                };
-            }
-            
-            function liftValue(source) {
-                return {
-                    subscribe: function (onNext, onError, onComplete) {
-                        $timeout(onNext.bind(null, source), 0, false)
-                            .then(onComplete);
-                        
-                        return {
-                            unsubscribe: Angular.noop,
-                        };
-                    }
-                };
-            }
-            
-            function setState(state, skipDigest) {
-                if (state !== currentState) {
+            function setState(state, forceLink) {
+                if (forceLink || state !== currentState) {
                     var linkFunction = stateLinkFunctions[state];
                     
-                    $element.empty();
+                    if (childScope) {
+                        childScope.$destroy();
+                    }
                     
+                    
                     if (!linkFunction) {
+                        $element.empty();
                         return;
                     }
                     
-                    var replacement = linkFunction($scope);
+                    childScope = isolateScope.$new();
+                    currentState = state;
                     
-                    $element.append(replacement);
-                    
-                    currentState = state;
+                    linkFunction(childScope, function (clone) {
+                        $element.empty();
+                        $element.append(clone);
+                    });
                 }
                 
-                if (!skipDigest && !$scope.$root.$$phase) {
-                    $scope.$digest(true);
+                if (!isolateScope.$root.$$phase) {
+                    isolateScope.$digest(true);
                 }
             }
+        };
+    }
+    
+    function liftPromise(source) {
+        return {
+            subscribe: function (onNext, onError, onComplete) {
+                source.then(onNext, onError, onNext)
+                    .catch(function (reason) {
+                        return reason;
+                    })
+                    .then(onComplete);
+                
+                return {
+                    unsubscribe: Angular.noop,
+                };
+            }
+        };
+    }
+    
+    function liftValue(source) {
+        return {
+            subscribe: function (onNext, onError, onComplete) {
+                $timeout(onNext.bind(null, source), 0, false)
+                    .then(onComplete);
+                
+                return {
+                    unsubscribe: Angular.noop,
+                };
+            }
+        };
+    }
+
+
+    function getStateLinkFunctions(tElement) {
+        var stateLinkFunctions = {};
+        var stateTemplates = {
+            loading: [],
+            active: [],
+            error: [],
+            complete: [],
+        };
+        var template = [];
+        
+        Angular.forEach(tElement.contents(), function (node) {
+            switch (node.nodeName.toLowerCase()) {
+                case 'loading': return stateTemplates.loading.push(node);
+                case 'active': return stateTemplates.active.push(node);
+                case 'error': return stateTemplates.error.push(node);
+                case 'complete': return stateTemplates.complete.push(node);
+                default: return template.push(node);
+            }
+        });
+        
+        var hasStateTemplates = false;
+        
+        Angular.forEach(stateTemplates, function (template, state) {
+            if (template.length) {
+                hasStateTemplates = true;
+                
+                var clone = Angular.element(template).clone();
+                
+                stateLinkFunctions[state] = $compile(clone);
+            }
+        });
+        
+        if (!hasStateTemplates) {
+            if (!template.length) {
+                template.push(document.createTextNode('{{$value}}'));
+            }
+                
+            var clone = Angular.element(template).clone();
+            
+            stateLinkFunctions.active = $compile(clone);
+            stateLinkFunctions.complete = $compile(clone.clone());
         }
-    };
-}]);
+        
+        return stateLinkFunctions;
+    }
+
+}]);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18883

increased by15.83%

Lines of code

347

increased by23.05%

No dependency changes