Nav controller tests

hacking/NavAngular.js

@@ -16,6 +16,7 @@ angular.module('ionic.ui', ['ngTouch'])
 .controller('NavCtrl', function($scope) {
   var _this = this;
 
+
   angular.extend(this, NavController.prototype);
 
   NavController.call(this, {
@@ -25,11 +26,20 @@ angular.module('ionic.ui', ['ngTouch'])
       shouldGoBack: function() {
       },
       setTitle: function(title) {
+        $scope.title = title;
       },
       showBackButton: function(show) {
       },
     }
   });
+
+  $scope.controllers = this.controllers;
+
+  $scope.getTopController = function() {
+    return $scope.controllers[$scope.controllers.length-1];
+  }
+
+  $scope.push = this.push;
 })
 
 .directive('navController', function() {
@@ -41,7 +51,7 @@ angular.module('ionic.ui', ['ngTouch'])
     controller: 'NavCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
     template: '<div class="view"><div ng-transclude></div></div>',
-    compile: function(element, attr, transclude, tabsCtrl) {
+    compile: function(element, attr, transclude, navCtrl) {
       return function($scope, $element, $attr) {
       };
     }
@@ -54,6 +64,8 @@ angular.module('ionic.ui', ['ngTouch'])
     require: '^navController',
     transclude: true,
     replace: true,
+    scope: {
+    },
     template: '<header id="nav-bar" class="bar bar-header bar-dark">' +
         '<h1 class="title">{{title}}</h1>' +
       '</header>'
@@ -62,18 +74,13 @@ angular.module('ionic.ui', ['ngTouch'])
 
 .directive('navContent', function() {
   return {
-    restrict: 'E',
+    restrict: 'C',
     require: '^navController',
-    scope: {
-      title: '='
-    },
     transclude: true,
     replace: true,
     template: '<div ng-transclude></div>',
-    link: function(scope, element, attrs, tabsCtrl) {
-      scope.$watch('title', function(value) {
-        console.log('Title chnaged', value);
-      });
+    link: function(scope, element, attrs, navCtrl) {
+      navCtrl.push(scope);
     }
   }
 });

hacking/NavController.js

@@ -2,10 +2,13 @@
   NavController = function(opts) {
     var _this = this;
 
+    console.log('CONSTRUCTOR', this);
+
     this.navBar = opts.navBar;
     this.content = opts.content;
     this.controllers = opts.controllers || [];
 
+    this._updateNavBar();
 
     // TODO: Is this the best way?
     this.navBar.shouldGoBack = function() {
@@ -18,10 +21,12 @@
       return this.controllers;
     },
     getTopController: function() {
-      return this.topController;
+      return this.controllers[this.controllers.length-1];
     },
     push: function(controller) {
-      var last = this.topController;
+      console.log('PUSHING');
+
+      var last = this.controllers[this.controllers.length - 1];
 
       this.controllers.push(controller);
 
@@ -36,15 +41,17 @@
 
       // Remove the old one
       //last && last.detach();
+      if(last) {
+        last.isVisible = false;
+        last.visibilityChanged && last.visibilityChanged();
+      }
 
       // Grab the top controller on the stack
       var next = this.controllers[this.controllers.length - 1];
 
       // TODO: No DOM stuff here
       //this.content.el.appendChild(next.el);
-
-      // Switch to it (TODO: Animate or such things here)
-      this.topController = next;
+      console.log('Top controller modified', this.topController);
 
       this._updateNavBar();
 
@@ -72,6 +79,7 @@
 
       // Switch to it (TODO: Animate or such things here)
       this.topController = next;
+      console.log('Top controller modified', this.topController);
 
       this._updateNavBar();
 
@@ -79,6 +87,10 @@
     },
 
     _updateNavBar: function() {
+      if(!this.topController) {
+        return;
+      }
+
       this.navBar.setTitle(this.topController.title);
 
       if(this.controllers.length > 1) {

hacking/TabAngular.js

@@ -31,6 +31,11 @@ angular.module('ionic.ui', ['ngTouch'])
   });
 
   $scope.controllers = this.controllers;
+
+  $scope.$watch('controllers', function(newV, oldV) {
+    console.log("CControlelrs changed", newV, oldV);
+    $scope.$apply();
+  });
 })
 
 .directive('tabs', function() {

hacking/navAngular.html

@@ -14,13 +14,14 @@
 
     <nav-controller>
       <header id="nav-bar" class="bar bar-header bar-dark">
-        <h1 class="title"></h1>
+        <h1 class="title">{{getTopController().title}}</h1>
       </header>
 
-      <content class="has-header content" id="content">
-        <nav-content title="Home">
-          <h1>{{title}}</h1>
-        </nav-content>
+      <content has-header="true">
+        <div class="nav-content" title="Home" ng-controller="CatsCtrl">
+            <h1>Cats cradle</h2>
+            <a href="#" class="button button-success" ng-click="goNext()">Next</a>
+        </div>
       </content>
     </nav-controller>
 
@@ -28,7 +29,13 @@
     <script src="NavAngular.js"></script>
     <script>
 
-      angular.module('navTest', ['ionic.ui']);
+      angular.module('navTest', ['ionic.ui'])
+
+      .controller('CatsCtrl', function($scope) {
+        $scope.goNext = function() {
+          console.log('Going next', $scope);
+        };
+      });
     </script>
   </body>
 </html>