Hacking on Angular extension for TabBar

2025-11-06 22:29:44 +08:00 · 2013-09-17 16:43:20 -05:00
parent 282b17fac4
commit b4e42a42f7
5 changed files with 191 additions and 9 deletions
--- a/hacking/TabAngular.js
+++ b/hacking/TabAngular.js
@ -0,0 +1,117 @@
+angular.module('ionic.ui', [])
+
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      hasHeader: '@',
+      hasTabs: '@'
+    },
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
+  }
+})
+
+.controller('TabsCtrl', function($scope) {
+  // Controller stuff goes here
+  $scope.items = [];
+
+  this.addItem = function(item) {
+    console.log('Adding item', item);
+    $scope.items.push({
+      title: item.title
+    });
+  };
+})
+
+.directive('tabs', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {},
+    transclude: true,
+    controller: 'TabsCtrl',
+    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
+    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
+    compile: function(element, attr, transclude, tabsCtrl) {
+      return function($scope, $element, $attr) {
+      };
+    }
+  }
+})
+
+// Generic controller directive
+.directive('tabController', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div ng-transclude></div>',
+    require: '^tabs',
+    scope: {
+      title: '@'
+    },
+    link: function(scope, element, attrs, tabsCtrl) {
+      tabsCtrl.addItem(scope);
+    }
+  }
+})
+
+
+.directive('tabBar', function() {
+  return {
+    restrict: 'E',
+    require: '^tabs',
+    transclude: true,
+    replace: true,
+    template: '<div class="tabs">' + 
+      '<a href="#" class="tab-item" ng-repeat="item in items">' +
+        '<i class="{{item.icon}}"></i> {{item.title}}' +
+      '</a>' +
+    '</div>'
+  }
+})
+
+.directive('tabItem', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '^tabBar',
+    scope: {
+      text: '@',
+      icon: '@',
+      active: '=',
+      tabSelected: '@',
+    },
+    compile: function(element, attrs, transclude) {
+      return function(scope, element, attrs, tabBarCtrl) {
+        var getActive, setActive;
+
+        scope.$watch('active', function(active) {
+          console.log('ACTIVE CHANGED', active);
+        });
+      };
+    },
+    link: function(scope, element, attrs, tabBarCtrl) {
+
+      // Store the index of this list item, which
+      // specifies which tab item it is
+      scope.tabIndex = element.index();
+
+      scope.active = true;
+
+      scope.selectTab = function(index) {
+        console.log('SELECT TAB', index);
+        tabBarCtrl.selectTabAtIndex(index);
+      };
+      
+      tabBarCtrl.addTab(scope);
+    },
+    template: '<li class="tab-item" ng-class="{active:active}">' + 
+        '<a href="#" ng-click="selectTab(tabIndex)">' + 
+          '<i class="{{icon}}"></i>' +
+          '{{text}}' +
+        '</a></li>'
+  }
+});
--- a/hacking/tabsAngular.html
+++ b/hacking/tabsAngular.html
@ -0,0 +1,55 @@
+<html ng-app="tabsTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Tab Bars</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <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/angular.js"></script>
+    <style>
+      .content {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <tabs>
+      <tab-controller title="Home">
+        <header class="bar bar-header bar-dark">
+          <h1 class="title">Tab Bars</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>Home</h1>
+        </content>
+      </tab-controller>
+      <tab-controller title="About">
+        <header class="bar bar-header bar-dark">
+          <h1 class="title">About</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>About Us</h1>
+        </content>
+      </tab-controller>
+      <tab-controller title="Settings">
+        <header class="bar bar-header bar-dark">
+          <h1 class="title">Settings</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>Settings</h1>
+        </content>
+      </tab-controller>
+    </tabs>
+
+    <script src="../../js/ionic-events.js"></script>
+    <script src="../../js/ionic-gestures.js"></script>
+    <script src="TabBar.js"></script>
+    <script src="TabBarController.js"></script>
+    <script src="TabAngular.js"></script>
+    <script>
+      angular.module('tabsTest', ['ionic.ui']);
+
+    </script>
+  </body>
+</html>