0.1: add directive

guo-yu · guo-yu · commit 0d9b47dc2c0f · 2014-07-31T17:46:35.000+08:00
diff --git a/examples/example.js b/examples/example.js
@@ -1,5 +1,10 @@
-angular.module('app', ['duoshuo']);
+var app = angular.module('app', ['duoshuo']);
 
 app.controller('duoshuo', function($scope, $duoshuo){
-  console.log($duoshuo);
+  // inspect current user 
+  $duoshuo.on('ready', function(err, data) {
+    console.log(data);
+    $scope.responseJSON = JSON.stringify(data);
+    $scope.$apply();
+  });
 });
diff --git a/examples/index.html b/examples/index.html
@@ -3,16 +3,34 @@
 <head>
   <meta charset="UTF-8">
   <title>Duoshuo Angular SDK</title>
+  <style>
+    h3 {
+      font-size: 16px;
+    }
+    .angular-duoshuo {
+      margin: 50px;
+    }
+    .response {
+      font-size: 12px;
+      color: #999;
+      margin-bottom: 20px;
+    }
+  </style>
 </head>
 <body>
+  <div id="angular-duoshuo" class="angular-duoshuo" ng-controller="duoshuo">
+    <h3 ng-show="responseJSON">当前用户数据:</h3>
+    <div class="response" ng-bind="responseJSON"></div>
+    <div duoshuo thread-key="123"></div>
+  </div>
   <script>
     var duoshuoQuery = {
-      short_name: 'blabla'
+      short_name: '111'
     }
   </script>
-  <script src="../bower_components/angular/angular.min.js"></script>
   <script src="http://static.duoshuo.com/embed.unstable.js"></script>
+  <script src="../bower_components/angular/angular.min.js"></script>
   <script src="../src/duoshuo.js"></script>
   <script src="./example.js"></script>
 </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -4,8 +4,9 @@
   "description": "a duoshuo SDK for angular.js, pure front-end, cross-domain request supported.",
   "main": "src/duoshuo.js",
   "scripts": {
-    "serve": "./node_modules/.bin/serve ./examples",
-    "start": "npm run dev",
+    "serve": "./node_modules/.bin/serve .",
+    "dev": "npm run serve",
+    "start": "npm run serve",
     "example": "npm run serve"
   },
   "repository": {
diff --git a/src/duoshuo.js b/src/duoshuo.js
@@ -1,4 +1,5 @@
-;(function(angular, duoshuo, API, configs) {
+;
+(function(angular, duoshuo, API, configs) {
 
   'use strict';
 
@@ -11,7 +12,33 @@
   angular.module('duoshuo', [])
     .factory('$duoshuo', function() {
       return new Duoshuo(configs);
-    });
+    })
+    .directive('duoshuo', ['$duoshuo',
+      function($duoshuo) {
+        return {
+          restrict: 'EA',
+          replace: true,
+          scope: {
+            threadKey: '=',
+            title: '=',
+            image: '=',
+            url: '=',
+            authorKey: '=',
+            formPosition: '=',
+            limit: '=',
+            order: '='
+          },
+          template: '<div class="ds-thread"></div>',
+          link: function(scope, element, attrs) {
+            scope.$watch('threadKey', function(threadKey) {
+              if (angular.isDefined(threadKey)) {
+                // $duoshuo.loadComment(scope, element[0]);
+              }
+            });
+          }
+        };
+      }
+    ]);
 
   function Duoshuo() {
     this.configs = configs;
@@ -28,16 +55,16 @@
     if (this.events.indexOf(eve) === 0) return callback(new Error('event not found'));
     var e = eve;
     if (e === 'ready') e = 'reset';
-    return DUOSHUO.visitor.on(e, function(){
+    return DUOSHUO.visitor.on(e, function() {
       var self = this;
       var data = this.data;
       return callback(null, data, self);
     });
   };
 
 })(
-  window.angular, 
-  window.DUOSHUO, 
+  window.angular,
+  window.DUOSHUO,
   window.DUOSHUO.API,
   window.duoshuoQuery
 );
