Working NavController and Angular extensions!

hacking/NavAngular.js

@@ -5,15 +5,17 @@ angular.module('ionic.ui', ['ngTouch'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    scope: {
-      hasHeader: '@',
-      hasTabs: '@'
-    },
-    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
+    scope: true,
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}"></div>',
+    compile: function(element, attr, transclude, navCtrl) {
+      return function($scope, $element, $attr) {
+        $scope.hasHeader = attr.hasHeader;
+      };
+    }
   }
 })
 
-.controller('NavCtrl', function($scope) {
+.controller('NavCtrl', function($scope, $element, $compile) {
   var _this = this;
 
 
@@ -39,14 +41,18 @@ angular.module('ionic.ui', ['ngTouch'])
     return $scope.controllers[$scope.controllers.length-1];
   }
 
-  $scope.push = this.push;
+  $scope.pushController = function(controller) {
+    //console.log('PUSHING OCNTROLLER', controller);
+    _this.push(controller);
+  }
+
+  $scope.navController = this;
 })
 
 .directive('navController', function() {
   return {
     restrict: 'E',
     replace: true,
-    scope: {},
     transclude: true,
     controller: 'NavCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
@@ -64,23 +70,27 @@ 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>'
+    template: '<header class="bar bar-header bar-dark nav-bar">' + 
+        '<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
+        '<h1 class="title">{{getTopController().title}}</h1>' + 
+      '</header>',
+    link: function(scope, element, attrs, navCtrl) {
+      scope.goBack = function() {
+        pageNumber--;
+        navCtrl.pop();
+      }
+    }
   }
 })
 
 .directive('navContent', function() {
   return {
-    restrict: 'C',
-    require: '^navController',
-    transclude: true,
-    replace: true,
-    template: '<div ng-transclude></div>',
-    link: function(scope, element, attrs, navCtrl) {
-      navCtrl.push(scope);
+    restrict: 'ECA',
+    scope: true,
+    link: function(scope, element, attrs) {
+      scope.title = attrs.title;
+      scope.isVisible = true;
+      scope.pushController(scope);
     }
   }
 });

hacking/NavController.js

@@ -2,8 +2,6 @@
   NavController = function(opts) {
     var _this = this;
 
-    console.log('CONSTRUCTOR', this);
-
     this.navBar = opts.navBar;
     this.content = opts.content;
     this.controllers = opts.controllers || [];
@@ -24,8 +22,6 @@
       return this.controllers[this.controllers.length-1];
     },
     push: function(controller) {
-      console.log('PUSHING');
-
       var last = this.controllers[this.controllers.length - 1];
 
       this.controllers.push(controller);
@@ -51,7 +47,8 @@
 
       // TODO: No DOM stuff here
       //this.content.el.appendChild(next.el);
-      console.log('Top controller modified', this.topController);
+      next.isVisible = true;
+      next.visibilityChanged && next.visibilityChanged();
 
       this._updateNavBar();
 
@@ -68,6 +65,10 @@
 
       // Grab the controller behind the top one on the stack
       last = this.controllers.pop();
+      if(last) {
+        last.isVisible = false;
+        last.visibilityChanged && last.visibilityChanged();
+      }
       
       // Remove the old one
       //last && last.detach();
@@ -76,10 +77,10 @@
 
       // TODO: No DOM stuff here
       //this.content.el.appendChild(next.el);
+      next.isVisible = true;
+      next.visibilityChanged && next.visibilityChanged();
 
       // Switch to it (TODO: Animate or such things here)
-      this.topController = next;
-      console.log('Top controller modified', this.topController);
 
       this._updateNavBar();
 
@@ -87,11 +88,11 @@
     },
 
     _updateNavBar: function() {
-      if(!this.topController) {
+      if(!this.getTopController()) {
         return;
       }
 
-      this.navBar.setTitle(this.topController.title);
+      this.navBar.setTitle(this.getTopController().title);
 
       if(this.controllers.length > 1) {
         this.navBar.showBackButton(true);

hacking/navAngular.html

@@ -7,33 +7,50 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../dist/ionic.css">
-    <script src="/vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular.js"></script>
     <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
   </head>
   <body>
 
     <nav-controller>
-      <header id="nav-bar" class="bar bar-header bar-dark">
-        <h1 class="title">{{getTopController().title}}</h1>
-      </header>
+      <nav-bar></nav-bar>
 
-      <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 has-header="true" ng-controller="AppCtrl">
       </content>
     </nav-controller>
 
     <script src="NavController.js"></script>
     <script src="NavAngular.js"></script>
     <script>
+      var pageNumber = 0;
+
+      var pushIt = function($scope, $compile, $element, cb) {
+        var childScope = $scope.$new();
+        childScope.isVisible = true;
+
+        pageNumber++;
+
+        var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" ng-show="isVisible">' +
+          '<h1>' + pageNumber + '</h1>' +
+          '<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
+          '</div>')(childScope, cb);
+      }
 
       angular.module('navTest', ['ionic.ui'])
 
-      .controller('CatsCtrl', function($scope) {
+      .controller('AppCtrl', function($scope, $compile, $element) {
+        pushIt($scope, $compile, $element, function(cloned, scope) {
+          $element.append(cloned);
+        })
+
+      })
+
+      .controller('CatsCtrl', function($scope, $compile, $element) {
+        console.log('Cats', $element);
         $scope.goNext = function() {
-          console.log('Going next', $scope);
+          pushIt($scope, $compile, $element, function(cloned, scope) {
+            $element.parent().append(cloned);
+          })
         };
       });
     </script>