Fixed angular content scoping issue

dist/ionic-angular.js

@@ -151,17 +151,21 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    scope: false,
+    template: '<div class="content-wrapper"><div class="content"></div></div>',
+    transclude: true,
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
-        $element.addClass('content');
+        var c = $element.children().eq(0);
+
+        c.addClass('content');
 
         if(attr.hasHeader) {
-          $element.addClass('has-header');
+          c.addClass('has-header');
         }
         if(attr.hasTabs) {
-          $element.addClass('has-tabs');
+          c.addClass('has-tabs');
         }
+        c.append(transclude($scope));
       }
     }
   }

example/toderp2/css/app.css

@@ -20,13 +20,17 @@
   height: 100px;
   margin: 40px auto;
 }
+.toderp-small-logo {
+  box-flex: 1;
+  -webkit-box-flex: 1;
+}
 #splash-view {
   opacity: 1;
 }
 #splash-view .ionic-logo {
 }
 
-#splash-view, #signup-view {
+#splash-view, #signup-view, #login-view {
   background: url('../img/splash.png') no-repeat transparent;
   background-size: cover;
 }
@@ -43,9 +47,10 @@
   color: #4a87ee;
 }
 
+
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   #signup-view {
     background: url('../img/splash@2x.png') no-repeat transparent;
-    background-size: contain;
+    background-size: cover;
   }
 }

example/toderp2/index.html

@@ -79,17 +79,13 @@
     <!-- Login -->
     <script id="login.html" type="text/ng-template">
       <div id="login-view" class="modal slide-in-up" ng-controller="LoginCtrl">
-        <header class="bar bar-header bar-success">
+        <header class="bar bar-header bar-secondary">
           <h1 class="title">Log in</h1>
-          <button class="button" ng-click="close()">Close</button>
+          <button class="button button-clear button-primary" ng-click="close()">Cancel</button>
         </header>
         <main class="content padded has-header">
           <form class="form-horizontal" ng-submit="tryLogin(loginForm)">
             <div class="input-group inset">
-              <label class="input-wrapper row">
-                <span class="input-label col-xs-4">Full name</span>
-                <input class="col-xs-8" type="text" placeholder="" ng-model="loginForm.name">
-              </label>
               <label class="input-wrapper row">
                 <span class="input-label col-xs-4">Email</span>
                 <input class="col-xs-8" type="email" placeholder="" ng-model="loginForm.email">
@@ -111,22 +107,26 @@
 
     <!-- Tasks -->
     <script id="tasks.html" type="text/ng-template">
-      <side-menu-ctrl id="tasks-view" nav-content class="view" ng-controller="TasksCtrl">
+      <side-menu-ctrl id="tasks-view" nav-content class="view" ng-controller="TasksCtrl" nav-bar="false">
         <div class="full-section" side-menu-content>
-          <header class="bar bar-header bar-dark">
+          <header class="bar bar-header bar-secondary">
             <a href="#" class="button"><i class="icon-reorder"></i></a>
-            <h1 class="title">Slide me</h1>
+            <h1 class="title">{{activeList.title}}</h1>
           </header>
           <div class="content has-header">
             <h1>Slide me side to side!</h1>
           </div>
         </div>
         <menu side="left">
-          <header>
-            <div class="toderp-logo"></div>
+          <header class="bar bar-header bar-secondary">
+            <button class="button button-clear">Edit</button>
+            <div class="toderp-small-logo"></div>
+            <button class="button button-icon">S</button>
           </header>
-          <content ng-controller="ProjectsCtrl">
-            <input type="text" ng-model="newProject.name">
+          <content has-header="true" ng-controller="ProjectsCtrl">
+            <form ng-submit="addProject(newProject)">
+              <input type="text" ng-model="newProject.title" placeholder="Create a new list...">
+            </form>
             <list>
               <li class="list-item" ng-repeat="project in projects">
                 {{project.title}}

example/toderp2/js/app.js

@@ -6,6 +6,7 @@ angular.module('ionic.todo', [
                'ionic.service.actionSheet',
 
                'ionic.ui.nav',
+               'ionic.ui.content',
                'ionic.ui.sideMenu',
                'ionic.ui.actionSheet',
 

example/toderp2/js/controllers.js

@@ -21,7 +21,7 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
 })
 
 // The login form controller
-.controller('LoginCtrl', function($scope,  AuthService) {
+.controller('LoginCtrl', function($scope,  $rootScope, AuthService) {
   console.log('Created login Ctrl');
 
   $scope.loginForm = {
@@ -42,6 +42,10 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
         $scope.loginError = true;
       });
   };
+
+  $rootScope.$on('angularFireAuth:login', function(evt, user) {
+    $scope.modal.hide();
+  });
 })
 
 // The signup form controller
@@ -83,14 +87,13 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
   };
 })
 
-.controller('ProjectsCtrl', function($scope, angularFire, FIREBASE_URL) {
-})
 
 // The tasks controller (main app controller)
 .controller('TasksCtrl', function($scope, angularFire, FIREBASE_URL) {
   var taskRef = new Firebase(FIREBASE_URL + '/todos');
   $scope.todos = [];
   angularFire(taskRef, $scope, 'todos');
+
   $scope.addTask = function(task) {
     var t = {};
     t = angular.extend({
@@ -102,4 +105,28 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
 
     $scope.task = {};
   };
-});
+})
+
+.controller('ProjectsCtrl', function($scope, angularFire, FIREBASE_URL) {
+  var taskRef = new Firebase(FIREBASE_URL + '/projects');
+
+  $scope.newProject = {};
+
+  $scope.projects = [];
+  angularFire(taskRef, $scope, 'projects');
+
+  $scope.addProject = function(newProject) {
+    var p = {
+      title: newProject.title,
+      user_id: $scope.user.id,
+      tasks: []
+    };
+
+    console.log("Adding project:", p);
+
+    $scope.projects.push(t);
+
+    $scope.task = {};
+  };
+})
+

js/ext/angular/src/directive/ionicContent.js

@@ -6,17 +6,21 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    scope: false,
+    template: '<div class="content-wrapper"><div class="content"></div></div>',
+    transclude: true,
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
-        $element.addClass('content');
+        var c = $element.children().eq(0);
+
+        c.addClass('content');
 
         if(attr.hasHeader) {
-          $element.addClass('has-header');
+          c.addClass('has-header');
         }
         if(attr.hasTabs) {
-          $element.addClass('has-tabs');
+          c.addClass('has-tabs');
         }
+        c.append(transclude($scope));
       }
     }
   }