v2.1.6

app/sanji-window/index.js

@@ -9,13 +9,13 @@ import './sanji-window-loading.tpl.html';
 import SanjiWindowService from './sanji-window.service';
 import SanjiWindowController from './sanji-window.controller';
 import SanjiWindowStateController from './sanji-window-state.controller';
-import SanjiWindowDirective from './sanji-window.directive';
-import SanjiWindowStateDirective from './sanji-window-state.directive';
+import SanjiWindowComponent from './sanji-window.component';
+import SanjiWindowStateComponent from './sanji-window-state.component';
 
 let app = angular.module('sanji.window', [ngMaterial, ngMdIcons, 'cgBusy']);
 app.factory('sanjiWindowService', SanjiWindowService.factory);
 app.controller('SanjiWindowController', SanjiWindowController);
 app.controller('SanjiWindowStateController', SanjiWindowStateController);
-app.directive('sanjiWindow', SanjiWindowDirective.directiveFactory);
-app.directive('sanjiWindowState', SanjiWindowStateDirective.directiveFactory);
+app.component('sanjiWindow', SanjiWindowComponent);
+app.component('sanjiWindowState', SanjiWindowStateComponent);
 export default app = app.name

app/sanji-window/sanji-window-loading.tpl.html

@@ -1,5 +1,6 @@
 <script type ="text/ng-template" id="sanji-window-loading.tpl.html">
   <div class="sj-window-loading" layout layout-align="space-around">
-    <md-progress-circular class="sj-spinner-bg md-whiteframe-1dp" md-diameter="35px" md-mode="indeterminate"></md-progress-circular>
+    <md-progress-circular class="sj-spinner-bg md-whiteframe-1dp"
+    md-diameter="35px" md-mode="indeterminate"></md-progress-circular>
   </div>
 </script>

app/sanji-window/sanji-window-state.component.js

@@ -0,0 +1,16 @@
+const SanjiWindowStateComponent = {
+  transclude: true,
+  require: {
+    parent: '^sanjiWindow'
+  },
+  bindings: {
+    defaultState: '@',
+    stateName: '@',
+    linkName: '@',
+    icon: '@'
+  },
+  template: `<div ng-if="vm.sanjiWindowMgr.navigateContent === vm.stateName" ng-transclude></div>`,
+  controller: 'SanjiWindowStateController',
+  controllerAs: 'vm'
+};
+export default SanjiWindowStateComponent;

app/sanji-window/sanji-window-state.controller.js

@@ -1,17 +1,19 @@
-const $inject = ['$log', '$scope'];
+const $inject = [];
 class SanjiWindowStateController {
   constructor(...injects) {
     SanjiWindowStateController.$inject.forEach((item, index) => this[item] = injects[index]);
+    this.sanjiWindowMgr = null;
   }
 
-  init(topCtrl, attrs) {
-    this.sanjiWindowMgr = topCtrl.sanjiWindowMgr;
+  $onInit() {
+    this.sanjiWindowMgr = this.parent.sanjiWindowMgr;
+    console.log(this.sanjiWindowMgr);
     if (undefined !== this.stateName) {
-      topCtrl.register({
+      this.parent.register({
         name: this.stateName,
         linkName: this.linkName,
         icon: this.icon,
-        isDefault: undefined !== attrs.defaultState ? true : false
+        isDefault: undefined !== this.defaultState ? true : false
       });
     }
   }

app/sanji-window/sanji-window.component.js

@@ -0,0 +1,12 @@
+const SanjiWindowComponent = {
+  transclude: true,
+  bindings: {
+    windowId: '@',
+    windowName: '@',
+    showLoadingBtn: '@'
+  },
+  templateUrl: 'sanji-window.tpl.html',
+  controller: 'SanjiWindowController',
+  controllerAs: 'vm'
+};
+export default SanjiWindowComponent;

app/sanji-window/sanji-window.controller.js

@@ -3,10 +3,11 @@ class SanjiWindowController {
   constructor(...injects) {
     SanjiWindowController.$inject.forEach((item, index) => this[item] = injects[index]);
     this.sanjiWindowMgr = this.sanjiWindowService.create(this.windowId, {name: this.windowName});
-    this.$scope.$on('$destroy', () => {
-      this.sanjiWindowMgr.clearStates();
-      this.sanjiWindowService.destroy(this.sanjiWindowMgr.getId());
-    });
+  }
+
+  $onDestroy() {
+    this.sanjiWindowMgr.clearStates();
+    this.sanjiWindowService.destroy(this.sanjiWindowMgr.getId());
   }
 
   register(state) {
@@ -18,7 +19,10 @@ class SanjiWindowController {
   }
 
   refresh() {
-    this.$rootScope.$broadcast('sj:window:refresh', {id: this.windowId, promise: this.sanjiWindowMgr.promise});
+    this.$rootScope.$broadcast('sj:window:refresh', {
+      id: this.windowId,
+      promise: this.sanjiWindowMgr.promise
+    });
   }
 }
 SanjiWindowController.$inject = $inject;

app/sanji-window/sanji-window.tpl.html

@@ -2,13 +2,16 @@
   <md-card class="sj-window" cg-busy="{promise: vm.sanjiWindowMgr.promise, templateUrl: 'sanji-window-loading.tpl.html'}">
     <md-card-header class="sj-window-header">
       <md-card-header-text layout layout-align="space-between center">
-        <h3 flex>{{vm.windowName}}</h3>
+        <h3 flex ng-bind="vm.windowName"></h3>
         <div flex class="sj-window-btn-group">
-          <md-button ng-if="undefined!==vm.showLoadingBtn" type="button" aria-label="Refresh" class="md-icon-button" ng-click="vm.refresh()">
+        <md-button ng-if="undefined!==vm.showLoadingBtn"
+        type="button" aria-label="Refresh" class="md-icon-button" ng-click="vm.refresh()">
             <ng-md-icon icon="refresh"></ng-md-icon>
           </md-button>
-          <md-menu ng-if="1 < vm.sanjiWindowMgr.links.length" md-position-mode="target-right target">
-            <md-button type="button" aria-label="Open menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
+          <md-menu ng-if="1 < vm.sanjiWindowMgr.links.length"
+          md-position-mode="target-right target">
+          <md-button type="button" aria-label="Open menu" class="md-icon-button"
+          ng-click="$mdOpenMenu($event)">
               <ng-md-icon md-menu-origin icon="apps"></ng-md-icon>
             </md-button>
             <md-menu-content width="4">

package.json

@@ -31,18 +31,18 @@
     "babel-loader": "~5.3.3",
     "babel-runtime": "~5.8.34",
     "codecov.io": "~0.1.6",
-    "commitizen": "~2.7.2",
+    "commitizen": "~2.8.0",
     "css-loader": "~0.23.0",
     "cz-conventional-changelog": "~1.1.5",
     "eslint": "~1.10.3",
     "eslint-loader": "~1.2.1",
     "extract-text-webpack-plugin": "~1.0.1",
     "file-loader": "~0.8.5",
-    "ghooks": "~1.0.3",
+    "ghooks": "~1.2.0",
     "html-webpack-plugin": "~1.7.0",
     "karma": "~0.13.15",
     "karma-coverage": "~0.5.3",
-    "karma-mocha": "~0.2.1",
+    "karma-mocha": "~1.0.0",
     "karma-mocha-reporter": "~2.0.0",
     "karma-phantomjs-launcher": "~1.0.0",
     "karma-sinon-chai": "~1.2.0",
@@ -52,15 +52,15 @@
     "ng-cache-loader": "0.0.15",
     "node-bourbon": "~4.2.3",
     "node-libs-browser": "~1.0.0",
-    "node-sass": "~3.4.2",
+    "node-sass": "~3.7.0",
     "phantomjs": "~2.1.3",
     "publish-latest": "~1.1.2",
     "raw-loader": "~0.5.1",
     "sass-loader": "~3.2.0",
     "semantic-release": "^4.3.5",
     "style-loader": "~0.13.0",
     "url-loader": "~0.5.7",
-    "webpack": "~1.12.9",
+    "webpack": "~1.13.0",
     "webpack-dev-server": "~1.14.0",
     "webpack-notifier": "~1.3.0"
   },
@@ -84,5 +84,5 @@
     "angular-material": "~1.0.5",
     "angular-material-icons": "^0.7.0"
   },
-  "version": "2.1.5"
+  "version": "2.1.6"
 }