Skip to content

Commit 384499c

Browse files
committed
Merge pull request #22 from flatlogic/messages-section-directive
Add messages-section directive
2 parents 125d2d5 + 4d23475 commit 384499c

File tree

3 files changed

+44
-64
lines changed

3 files changed

+44
-64
lines changed
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
(function() {
2+
'use strict';
3+
4+
angular
5+
.module('app')
6+
.directive('messagesSection', messagesSectionDirective);
7+
8+
function messagesSectionDirective() {
9+
return {
10+
restrict: 'E',
11+
controller: messagesSectionController,
12+
scope: {
13+
title: '@',
14+
messages: '='
15+
},
16+
controllerAs: 'vm',
17+
templateUrl: 'app/views/partials/messages-section.html'
18+
};
19+
20+
function messagesSectionController($scope) {
21+
var vm = this;
22+
23+
vm.title = $scope.title;
24+
vm.messages = $scope.messages;
25+
}
26+
}
27+
})();
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<section>
2+
<md-subheader class="md-accent">{{vm.title}}</md-subheader>
3+
<md-list>
4+
<md-list-item class="md-3-line" ng-repeat="message in vm.messages">
5+
<img class="md-avatar" ng-src="assets/images/einstein.jpg">
6+
<div class="md-list-item-text">
7+
<h3>{{message.subject}}</h3>
8+
<h4>{{message.userName}}</h4>
9+
<p>{{message.text}}</p>
10+
</div>
11+
</md-list-item>
12+
</md-list>
13+
</section>
Lines changed: 4 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,10 @@
1-
<!-- TODO: move section element to directive -->
21
<div class="messages" ng-controller="MessagesController as vm">
32
<md-content class="messages-content">
4-
<section>
5-
<md-subheader class="md-accent">New Orders</md-subheader>
6-
<md-list>
7-
<md-list-item class="md-3-line" ng-repeat="message in vm.messages">
8-
<img class="md-avatar" ng-src="assets/images/einstein.jpg">
9-
<div class="md-list-item-text">
10-
<h3>{{message.subject}}</h3>
11-
<h4>{{message.userName}}</h4>
12-
<p>{{message.text}}</p>
13-
</div>
14-
</md-list-item>
15-
</md-list>
16-
</section>
173

18-
<section>
19-
<md-subheader class="md-primary">Awaiting delivery</md-subheader>
20-
<md-list>
21-
<md-list-item class="md-3-line"
22-
ng-repeat="message in vm.messages">
23-
<img class="md-avatar" ng-src="assets/images/einstein.jpg">
4+
<messages-section title="New Orders" messages="vm.messages"></messages-section>
5+
<messages-section title="Delivered" messages="vm.messages"></messages-section>
6+
<messages-section title="Problems reported" messages="vm.messages"></messages-section>
247

25-
<div class="md-list-item-text">
26-
<h3>{{message.subject}}</h3>
27-
<h4>{{message.userName}}</h4>
28-
29-
<p>{{message.text}}</p>
30-
</div>
31-
</md-list-item>
32-
</md-list>
33-
</section>
34-
35-
<section>
36-
<md-subheader class="md-accent">Delivered</md-subheader>
37-
<md-list>
38-
<md-list-item class="md-3-line"
39-
ng-repeat="message in vm.messages">
40-
<img class="md-avatar" ng-src="assets/images/einstein.jpg">
41-
42-
<div class="md-list-item-text">
43-
<h3>{{message.subject}}</h3>
44-
<h4>{{message.userName}}</h4>
45-
46-
<p>{{message.text}}</p>
47-
</div>
48-
</md-list-item>
49-
</md-list>
50-
</section>
51-
52-
<section>
53-
<md-subheader class="md-warn">Problems reported</md-subheader>
54-
<md-list>
55-
<md-list-item class="md-3-line"
56-
ng-repeat="message in vm.messages">
57-
<img class="md-avatar" ng-src="assets/images/einstein.jpg">
58-
59-
<div class="md-list-item-text">
60-
<h3>{{message.subject}}</h3>
61-
<h4>{{message.userName}}</h4>
62-
63-
<p>{{message.text}}</p>
64-
</div>
65-
</md-list-item>
66-
</md-list>
67-
</section>
688
<md-divider></md-divider>
699
</md-content>
70-
</div>
10+
</div>

0 commit comments

Comments
 (0)