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

sample/app/app.js

@@ -91,6 +91,22 @@ angular.module('uiRouterSample', [
               }, 100);
             }]
         })
+
+        .state('me', {
+          url: '/me',
+          template: "<h1>Me, <a ui-sref=\"myself\">myself</a></h1>"
+        })
+
+        .state('myself', {
+          parent: 'me',
+          independent: true,
+          url: '/myself',
+          views: {
+            'myself@': {
+              template: "<h1>Myself, <a ui-sref=\"^\">me</a></h1>"
+            }
+          }
+        })
     }
   ]
 );

sample/index.html

@@ -50,6 +50,7 @@
              its descendant states are activated. -->
           <li ng-class="{active: $state.includes('contacts')}"><a ui-sref="contacts.list">Contacts</a></li>
           <li ui-sref-active="active"><a ui-sref="about">About</a></li>
+          <li ui-sref-active="me"><a ui-sref="me">Me</a></li>
         </ul>
 
         <!-- Here is a named ui-view. ui-views don't have to be named, but we'll be populate this
@@ -61,6 +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="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());