feat($state): "independent" (child) state implementation

"independent" states must have defined parents (besides abstract "root")

Prevent "independent" child state from rendering parent's template, but inherits everything as usual

Forces state reload (render parent's views) when coming back from independent child state

Author: gugiserman

sample/app/app.js

@@ -94,16 +94,16 @@ angular.module('uiRouterSample', [
 
         .state('me', {
           url: '/me',
-          template: "<h1>Me, <a ui-sref=\"giserman\">Giserman</a></h1>"
+          template: "<h1>Me, <a ui-sref=\"myself\">myself</a></h1>"
         })
 
-        .state('giserman', {
+        .state('myself', {
           parent: 'me',
           independent: true,
-          url: '/giserman',
+          url: '/myself',
           views: {
-            'giserman@': {
-              template: "<h1>Giserman, <a ui-sref=\"^\">me</a></h1>"
+            'myself@': {
+              template: "<h1>Myself, <a ui-sref=\"^\">me</a></h1>"
             }
           }
         })

sample/index.html

@@ -12,7 +12,7 @@
     <!-- Include both angular.js and angular-ui-router.js-->
     <script src="../lib/angular-1.2.14/angular.js"></script>
     <script src="../lib/angular-1.2.14/angular-animate.js"></script>
-    <script src="../build/angular-ui-router.js"></script>
+    <script src="../release/angular-ui-router.js"></script>
 
     <!-- app.js declares the uiRouterSample module and adds items to $rootScope, and defines
          the "home" and "about" states
@@ -62,7 +62,7 @@
     <!-- Here is the main ui-view (unnamed) and will be populated by its immediate children's templates
          unless otherwise explicitly named views are targeted. It's also employing ng-animate. -->
     <div ui-view class="container slide" style="padding-top: 80px;"></div>
-    <div ui-view="giserman" class="container slide"></div>
+    <div ui-view="myself" class="container slide"></div>
 
 
     <hr>

src/state.js

@@ -27,6 +27,11 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory) {
   // Builds state properties from definition passed to registerState()
   var stateBuilder = {
 
+    // Independent child state inherits everything from it's parent, as usual, but won't render nor keep inherited views.
+    independent: function(state) {
+      if (isDefined(state.parent)) return isDefined(state.independent) ? state.independent : false;
+    },
+
     // Derive parent state from a hierarchical name only if 'parent' is not explicitly defined.
     // state.children = [];
     // if (parent) parent.children.push(state);
@@ -795,7 +800,8 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory) {
       // Starting from the root of the path, keep all levels that haven't changed
       var keep = 0, state = toPath[keep], locals = root.locals, toLocals = [];
 
-      if (!options.reload) {
+      // Force state to reload if coming from an independent child
+      if (!options.reload && !from.independent) {
         while (state && state === fromPath[keep] && equalForKeys(toParams, fromParams, state.ownParams)) {
           locals = toLocals[keep] = state.locals;
           keep++;

src/viewDirective.js

@@ -204,11 +204,13 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll) {
         function updateView(firstTime) {
           var newScope        = scope.$new(),
               name            = currentEl && currentEl.data('$uiViewName'),
-              previousLocals  = name && $state.$current && $state.$current.locals[name];
+              previousLocals  = name && $state.$current && $state.$current.locals[name],
+              independent     = $state.$current.independent;
 
-          if (!firstTime && previousLocals === latestLocals) return; // nothing to do
+          if ( (!firstTime && previousLocals === latestLocals) && !independent ) return; // nothing to do
 
           var clone = $transclude(newScope, function(clone) {
+
             renderer.enter(clone, $element, function onUiViewEnter() {
               if (angular.isDefined(autoScrollExp) && !autoScrollExp || scope.$eval(autoScrollExp)) {
                 $uiViewScroll(clone);
@@ -258,15 +260,28 @@ function $ViewDirectiveFill ($compile, $controller, $state) {
 
         $element.data('$uiViewName', name);
 
-        var current = $state.$current,
-            locals  = current && current.locals[name];
+        var current     = $state.$current,
+            locals      = current && current.locals[name],
+            independent = current.independent,
+            split       = [];
+
+        if (name.length > 1) split.push(name.split("@")[0]);
+          else split.push(name);
 
         if (! locals) {
           return;
         }
 
+        var template = locals.$template || initial;
+
+        if ( independent ) {
+          if (split[0] !== locals.$$state.self.name) {
+            template = null;
+          }
+        }
+
         $element.data('$uiView', { name: name, state: locals.$$state });
-        $element.html(locals.$template ? locals.$template : initial);
+        $element.html(template);
 
         var link = $compile($element.contents());