deanapeterson · August 29, 2015 14:13 · Jan 14, 2015 · Jan 14, 2015 · Jan 12, 2015 · Jan 12, 2015
diff --git a/alternate-ui-router-event-binding.js b/alternate-ui-router-event-binding.js
@@ -20,8 +20,10 @@ angular.module("app", ["ui.router"])
 
           },
           //fired only when state is the "from" state
-          onFromStateChangeStart : function(event){
-            event.preventDefault();
+          onFromStateChangeStart : function(event, $state, toState){
+            if($state.includes(toState) === false){
+            	event.preventDefault();
+            }
           }
         }
     });

diff --git a/alternate-ui-router-event-binding.js b/alternate-ui-router-event-binding.js
@@ -28,23 +28,25 @@ angular.module("app", ["ui.router"])
 })
 .run(function($rootScope, $injector){
 
-  $rootScope.$on("$stateChangeStart", function(event, to, toParams, from, fromParams){
-    var stateChangeArgs = {
-      event : event,
-      to : to,
-      toParams : toParams,
-      from : from,
-      fromParams : fromParams
-    };
-
-    if(to.data.onToStateChangeStart){
-      $injector.invoke(to.data.onToStateChangeStart, {}, stateChangeArgs);
-    }
-
-    if(from.data.onFromStateChangeStart){
-      $injector.invoke(from.data.onFromStateChangeStart, {}, stateChangeArgs);
-    }
-
-  });
+		$rootScope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams){
+			var stateChangeArgs = {
+				event : event,
+				toState : toState,
+				toParams : toParams,
+				fromState : fromState,
+				fromParams : fromParams
+			};
+			var toStateData = toState.data || {};
+			var fromStateData = fromState.data || {};
+
+			if(toStateData.onToStateChangeStart){
+				$injector.invoke(toStateData.onToStateChangeStart, {}, stateChangeArgs);
+			}
+
+			if(fromStateData.onFromStateChangeStart){
+				$injector.invoke(fromStateData.onFromStateChangeStart, {}, stateChangeArgs);
+			}
+
+		});
 
 });
diff --git a/alternate-ui-router-event-binding.js b/alternate-ui-router-event-binding.js
@@ -7,7 +7,7 @@
  * 
  * I like this because the we can run all handlers through one event binding
  * and make the state definition object for self-contained.
- * /
+ **/
 
 angular.module("app", ["ui.router"])
 .config(function(){

diff --git a/ui-router-events.js → alternate-ui-router-event-binding.js b/ui-router-events.js → alternate-ui-router-event-binding.js
diff --git a/ui-router-events.js b/ui-router-events.js
@@ -1,3 +1,14 @@
+/**
+ * Similar to the idea of adding 'rules' to a states data object, I add injectible 
+ * handlers keyed to the specific stateChange relationship:
+ * 
+ * 'onToStateChangeStart/Success' - fired when the state is the destination
+ * 'onFromStateChangeStart/Success' - fired when the state is the previous
+ * 
+ * I like this because the we can run all handlers through one event binding
+ * and make the state definition object for self-contained.
+ * /
+
 angular.module("app", ["ui.router"])
 .config(function(){
   $stateProvider

diff --git a/ui-router-events.js b/ui-router-events.js
@@ -4,12 +4,11 @@ angular.module("app", ["ui.router"])
     .state("root", {
         template : "<div ui-view></div>",
         data : {
-          onStateChangeStart : function(toParams, fromParams){
-
-          },
+          //fired only when state is the "to" state
           onToStateChangeStart : function(to, from){
 
           },
+          //fired only when state is the "from" state
           onFromStateChangeStart : function(event){
             event.preventDefault();
           }
@@ -27,10 +26,6 @@ angular.module("app", ["ui.router"])
       fromParams : fromParams
     };
 
-    if(to.data.onStateChangeStart){
-      $injector.invoke(to.data.onStateChangeStart, {}, stateChangeArgs);
-    }
-
     if(to.data.onToStateChangeStart){
       $injector.invoke(to.data.onToStateChangeStart, {}, stateChangeArgs);
     }

diff --git a/ui-router-events.js b/ui-router-events.js
@@ -14,7 +14,8 @@ angular.module("app", ["ui.router"])
             event.preventDefault();
           }
         }
-    })
+    });
+})
 .run(function($rootScope, $injector){
 
   $rootScope.$on("$stateChangeStart", function(event, to, toParams, from, fromParams){

diff --git a/new_gist_file.js → ui-router-events.js b/new_gist_file.js → ui-router-events.js
diff --git a/new_gist_file.js b/new_gist_file.js
@@ -0,0 +1,43 @@
+angular.module("app", ["ui.router"])
+.config(function(){
+  $stateProvider
+    .state("root", {
+        template : "<div ui-view></div>",
+        data : {
+          onStateChangeStart : function(toParams, fromParams){
+
+          },
+          onToStateChangeStart : function(to, from){
+
+          },
+          onFromStateChangeStart : function(event){
+            event.preventDefault();
+          }
+        }
+    })
+.run(function($rootScope, $injector){
+
+  $rootScope.$on("$stateChangeStart", function(event, to, toParams, from, fromParams){
+    var stateChangeArgs = {
+      event : event,
+      to : to,
+      toParams : toParams,
+      from : from,
+      fromParams : fromParams
+    };
+
+    if(to.data.onStateChangeStart){
+      $injector.invoke(to.data.onStateChangeStart, {}, stateChangeArgs);
+    }
+
+    if(to.data.onToStateChangeStart){
+      $injector.invoke(to.data.onToStateChangeStart, {}, stateChangeArgs);
+    }
+
+    if(from.data.onFromStateChangeStart){
+      $injector.invoke(from.data.onFromStateChangeStart, {}, stateChangeArgs);
+    }
+
+  });
+
+});
No results found