clean up message section directive, close #24

Author: micrum

src/app/views/partials/messages-section.html

@@ -8,22 +8,27 @@
     function messagesSectionDirective() {
         return {
             restrict: 'E',
-            controller: messagesSectionController,
             scope: {
                 title: '@',
                 theme: '@',
                 messages: '='
             },
-            controllerAs: 'vm',
-            templateUrl: 'app/views/partials/messages-section.html'
+            template: '' +
+                      '<section>' +
+                      '  <md-subheader ng-class="theme">{{title}}</md-subheader>' +
+                      '  <md-list>' +
+                      '    <md-list-item class="md-3-line" ng-repeat="message in messages">' +
+                      '    <img class="md-avatar" ng-src="assets/images/einstein.jpg">' +
+                      '    <div class="md-list-item-text">' +
+                      '      <h3>{{message.subject}}</h3>' +
+                      '      <h4>{{message.userName}}</h4>' +
+                      '      <p>{{message.text}}</p>' +
+                      '    </div>' +
+                      '    </md-list-item>' +
+                      '  </md-list>' +
+                      '</section>',
+            link : function(scope, element, attrs) {
+            }
         };
-
-        function messagesSectionController($scope) {
-            var vm = this;
-
-            vm.title = $scope.title;
-            vm.theme = $scope.theme;
-            vm.messages = $scope.messages;
-        }
     }
 })();

src/components/directives/messagesSection.js

@@ -8,18 +8,18 @@ angular.module('app')
       transclude: true,
       scope: { title: '@', template: '@', options: '@' },
       template: '' +
-      '<section layout-margin class="md-whiteframe-z1 panel-widget">' +
-      '  <md-toolbar md-theme="custom" class="md-hue-1 panel-widget-toolbar">' +
-      '    <div class="md-toolbar-tools">' +
-      '      <h3 class="panel-widget-tittle">{{title}}</h3>' +
-      '      <span flex></span>' +
-      '      <md-button ng-show="options" ng-click="$showOptions = !$showOptions" class="md-icon-button" aria-label="Show options">' +
-      '        <i class="material-icons">more_vert</i>' +
-      '      </md-button>' +
-      '    </div>' +
-      '  </md-toolbar>' +
-      '  <div ng-include="template"/>' +
-      '</section>',
+                '<section layout-margin class="md-whiteframe-z1 panel-widget">' +
+                '  <md-toolbar md-theme="custom" class="md-hue-1 panel-widget-toolbar">' +
+                '    <div class="md-toolbar-tools">' +
+                '      <h3 class="panel-widget-tittle">{{title}}</h3>' +
+                '      <span flex></span>' +
+                '      <md-button ng-show="options" ng-click="$showOptions = !$showOptions" class="md-icon-button" aria-label="Show options">' +
+                '        <i class="material-icons">more_vert</i>' +
+                '      </md-button>' +
+                '    </div>' +
+                '  </md-toolbar>' +
+                '  <div ng-include="template"/>' +
+                '</section>',
       compile: function(element, attrs, linker) {
         return function(scope, element) {
           linker(scope, function(clone) {