javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Angular and taweaks

Browse Source
This commit is contained in:
Max Lynch
2013-08-31 18:15:56 -05:00
parent 09a4e6c0ef
commit ef32c8cd2a
18 changed files with 186 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
example/angular/chat/app.js vendored
View File

@ -9,10 +9,19 @@ chat.controller('RoomsCtrl', function($scope) {
{ name: 'All', key: 'all' },
{ name: 'Marketing', key: 'marketing' }
];
$scope.openPanel = function() {
console.log('Open panel');
$scope.isPanelShowing = true;
};
});
// TODO: Move this to a directive corresponding to this panel
// Grab the sections
var page = document.getElementById('page');
var leftPanel = document.getElementById('left-panel');
var rightPanel = document.getElementById('right-panel');
var controller = new ion.controllers.LeftRightPanelViewController({
left: leftPanel,
leftWidth: 270,
right: rightPanel,
rightWidth: 270,
center: page,
animateClass: 'ion-panel-animated'
});

70
example/angular/chat/index.html
View File

@ -7,47 +7,47 @@
<link rel="stylesheet" href="../../../dist/ionic.css">
<script src="angular-1.2.0rc1.min.js"></script>
<script src="angular-touch.js"></script>
<script src="app.js"></script>
<script src="../../../js/framework/ion-panel.js"></script>
<script src="../../../js/framework/glue/angular-glue.js"></script>
</head>
<body ng-app="Chat">
<section class="panel-page-container" ng-controller="RoomsCtrl">
<div id="left-panel" class="ion-panel ion-panel-left">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</div>
<div id="right-panel" class="ion-panel ion-panel-right">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</div>
<div id="page" class="full-section">
<header class="bar bar-header bar-dark">
<button class="button button-dark">Rooms</button>
<h1 class="title">Feeds</h1>
</header>
<section id="this-panel" class="panel-content" ng-class="{'ion-panel-opened': isPanelShowing}">
<ul class="list">
<li class="list-item">
Max Lynch
<main class="content has-header">
<ul class="list" ng-controller="RoomsCtrl">
<li class="list-item" ng-repeat="room in rooms">
{{room.name}}
</li>
</ul>
</section>
<section id="that-panel" class="panel-content" ng-class="{'ion-panel-opened': isPanelShowing}">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</section>
</main>
</div>
<section>
<header class="bar bar-header bar-dark">
<button class="button button-dark" ng-click="openPanel()">Rooms</button>
<h1 class="title">Feeds</h1>
</header>
<main class="content has-header">
<ul class="list">
<li class="list-item" ng-repeat="room in rooms">
{{room.name}}
</li>
</ul>
</main>
</section>
</section>
<script src="../../../js/ionic-events.js"></script>
<script src="../../../js/ionic-gestures.js"></script>
<script src="../../../js/controllers/ionic-leftrightpanel.js"></script>
<script src="../../../js/ionic-panel.js"></script>
<script src="../../../connectors/angular/angular-glue.js"></script>
<script src="app.js"></script>
</body>
</html>