调试了一下增加分类跟书签接口

public/scripts/controllers/bookmarks-controller.js

@@ -27,7 +27,6 @@ app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', '$window',
     function getBookmarks(params) {
         bookmarkService.getBookmarks(params).then(
             function(data) {
-                console.log(data);
                 $scope.bookmarks = data;
             },
             function(errorMsg) {

public/scripts/controllers/edit-controller.js

@@ -1,13 +1,91 @@
-app.controller('editCtr', ['$scope', '$state', function($scope, $state) {
+app.controller('editCtr', ['$scope', '$state', 'bookmarkService', 'pubSubService', function($scope, $state, bookmarkService, pubSubService) {
+    console.log("Hello , I enter editCtr...");
+    init();
     semanticInit();
 
-    $scope.addTag = function() {
+    $scope.addTags = function() {
-        console.log('Hello , you have click add tag btn......')
+        console.log('Hello , you have click add tag btn......');
+        $scope.newTags = $scope.newTags.replace("，", ",");
+        var tags = $scope.newTags.split(",");
+        var params = [];
+        tags.forEach(function(tag) {
+            tag = tag.replace(/(^\s*)|(\s*$)/g, '').replace(/\s+/g, ' '); // 去除前后空格，多个空格转为一个空格;
+
+            var find = false;
+            for (var i = 0; i < $scope.tags.length; i++) {
+                if ($scope.tags[i].name === tag) {
+                    find = true;
+                    $('.ui.fluid.search.dropdown').dropdown('set selected', $scope.tags[i].id);
+                }
+            };
+            if (!find) {
+                params.push(tag);
+            }
+        });
+
+        console.log(params);
+
+    }
+    $scope.cancel = function() {
+        console.log('Hello , you have click cancel btn......');
+    }
+    $scope.ok = function() {
+        console.log('Hello , you have click ok btn......');
+        var selectedTags = $('.ui.modal.js-add-bookmark .ui.dropdown').dropdown('get value');
+        console.log($scope.url, $scope.title, $scope.description, $scope.public, selectedTags);
+
+        bookmarkService.addBookmark({
+            a: 'Hello i love this world'
+        }).then(
+            function(data) {
+                console.log(data);
+            },
+            function(errorMsg) {
+                console.log(errorMsg);
+            }
+        );
+    }
+
+    pubSubService.subscribe('MenuCtr.showAddBookmarkMoadl', $scope, function(event, params) {
+        console.log('subscribe MenuCtr.MenuCtr.showAddBookmarkMoadl', params);
+        $('.ui.modal.js-add-bookmark').modal('show');
+        $('.ui.modal.js-add-bookmark .ui.dropdown').dropdown('clear');
+        $('.ui.modal.js-add-bookmark .ui.dropdown').addClass('loading');
+        init();
+        var params = {
+            user_id: 1
+        };
+        getTags(params);
+    });
+
+    function getTags(params) {
+        bookmarkService.getTags(params).then(
+            function(data) {
+                $scope.tags = data;
+                semanticInit();
+                $('.ui.modal.js-add-bookmark .ui.dropdown').removeClass('loading');
+            },
+            function(errorMsg) {
+                console.log(errorMsg);
+            }
+        );
     }
 
     function semanticInit() {
-        $('.ui.dropdown').dropdown({
+        setTimeout(() => {
-            forceSelection: false,
+            $('.ui.dropdown').dropdown({
-        });
+                forceSelection: false,
+                maxSelections: 3,
+            });
+        }, 1000);
+    }
+
+    function init() {
+        $scope.url = '';
+        $scope.title = '';
+        $scope.description = '';
+        $scope.newTags = '';
+        $scope.tags = []; // tag = {id:xxx, name:'yyy'}
+        $scope.public = '1';
     }
 }]);

public/scripts/controllers/menus-controller.js

@@ -66,7 +66,9 @@ app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope,
         });
     }
     $scope.showAddBookmarkMoadl = function() {
-        $('.ui.modal.js-add-bookmark').modal('show');
+        pubSubService.publish('MenuCtr.showAddBookmarkMoadl', {
+            'action': 'add'
+        });
     }
 
     function semanticInit() {

public/scripts/services/bookmark-service.js

@@ -21,8 +21,19 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
                 });
             return def.promise;
         },
-        addBookmark: function() {
+        addBookmark: function(params) {
-
+            var def = $q.defer();
+            $http.post('/api/addBookmark/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data) {
+                    console.log('Error: ' + data);
+                    def.reject('Failed to get todos');
+                });
+            return def.promise;
         },
         delBookmark: function() {
 
@@ -49,7 +60,20 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
                 });
             return def.promise;
         },
-        // register: register
+        addTags: function(params) {
+            var def = $q.defer();
+            $http.post('/api/addTags/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data) {
+                    console.log('Error: ' + data);
+                    def.reject('Failed to get todos');
+                });
+            return def.promise;
+        },
     };
 
     return service;

public/views/edit.html

@@ -5,54 +5,45 @@
     </div>
     <div class="content">
         <div class="ui form">
-            <div class="field">
+            <div class="required field">
                 <label>书签链接</label>
-                <input type="text" placeholder="">
+                <input type="text" placeholder="" ng-model="url">
             </div>
-            <div class="field">
+            <div class="required field">
                 <label>书签标题</label>
-                <input type="text" placeholder="">
+                <input type="text" placeholder="" ng-model="title">
             </div>
-            <div class="field">
+            <div class="required field">
                 <label>书签分类</label>
                 <div class="fields">
-                    <div class="eleven wide field">
+                    <div class="eight wide field">
-                        <select class="ui fluid search dropdown" multiple="">
+                        <select class="ui fluid search dropdown js-tags" multiple="" ng-class="{loading: loadTags }">
-                            <option value="">选择已有分类</option>
+                            <option value="">选择已有分类，可以使用搜索功能</option>
-                            <option value="AL">Alabama</option>
+                            <option value="{{ tag.id }}" ng-repeat="tag in tags">{{ tag.name }}</option>
-                            <option value="AK">Blaska</option>
-                            <option value="AZ">Arizona</option>
-                            <option value="AR">Frkansas</option>
-                            <option value="CA">California</option>
-                            <option value="CO">Solorado</option>
-                            <option value="CT">Connecticut</option>
-                            <option value="DE">Delaware</option>
                         </select>
                     </div>
-                    <div class="five wide field">
+                    <div class="eight wide field">
                         <div class="ui action input">
-                            <input type="text" placeholder="多个分类请用 , 隔开">
+                            <input type="text" placeholder="多个分类请用中文或英文逗号 , 隔开" ng-model="newTags">
-                            <button class="ui button" ng-click="addTag()">添加新分类</button>
+                            <button class="ui button" ng-click="addTags()">添加新分类</button>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="field">
                 <label>描述</label>
-                <textarea rows="2" placeholder="可以是网站的说明，也可以备忘一下账号密码什么的，就算公开你的链接，这个也只有自己能在详情里面看到"></textarea>
+                <textarea rows="2" placeholder="可以是网站的说明，也可以备忘一下账号密码什么的，就算公开你的链接，这个也只有自己能在详情里面看到" ng-model="description"></textarea>
             </div>
-            <div class="ui segment">
+            <div class="field">
-                <div class="field">
+                <div class="ui checkbox checked">
-                    <div class="ui toggle checkbox checked">
+                    <input type="checkbox" name="example" checked="">
-                        <input type="checkbox" name="gift" tabindex="0" class="hidden">
+                    <label>我要公开此收藏的链接供别人搜索</label>
-                        <label>我要公开此收藏的链接供别人搜索</label>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="actions">
-        <div class="ui button">取消</div>
+        <div class="ui button" ng-click="cancel()">取消</div>
-        <div class="ui green button">发送</div>
+        <div class="ui green button" ng-click="ok()">发送</div>
     </div>
 </div>

routes/api.js

@@ -1,21 +1,21 @@
 var api = require('express').Router();
 var mysql = require('mysql');
-var client = mysql.createConnection({
-    host: '172.24.13.5',
-    user: 'root',
-    password: 'root123',
-    database: 'mybookmarks',
-    multipleStatements: true,
-    port: 3306
-});
 // var client = mysql.createConnection({
-//     host: '127.0.0.1',
+//     host: '172.24.13.5',
-//     user: 'lcq',
+//     user: 'root',
-//     password: '123456',
+//     password: 'root123',
 //     database: 'mybookmarks',
 //     multipleStatements: true,
 //     port: 3306
 // });
+var client = mysql.createConnection({
+    host: '127.0.0.1',
+    user: 'lcq',
+    password: '123456',
+    database: 'mybookmarks',
+    multipleStatements: true,
+    port: 3306
+});
 client.connect();
 
 api.get('/bookmarks', function(req, res) {
@@ -105,8 +105,31 @@ api.get('/bookmarks', function(req, res) {
 
 api.get('/tags', function(req, res) {
     console.log('hello tags', JSON.stringify(req.query));
-    var data = ['搜索', '常用', '新闻', '博文', 'JavaScript']
+    var user_id = req.query.user_id;
-    res.json(data);
+    var sql = "SELECT id, name FROM `tags` WHERE `user_id` = '" + user_id + "'"
+    client.query(sql, function(error, result, fields) {
+        if (error) {
+            res.json({
+                error: 'error tags'
+            });
+        } else {
+            res.json(result);
+        }
+    })
+});
+
+api.post('/addBookmark', function(req, res) {
+    console.log('hello addBookmark', JSON.stringify(req.query), JSON.stringify(req.body));
+    res.json({
+        a: 'i love this world, too!'
+    });
+});
+
+api.post('/addTags', function(req, res) {
+    console.log('hello addTags', JSON.stringify(req.query), JSON.stringify(req.body));
+    res.json({
+        a: 'i love this world, too!'
+    });
 });
 // client.end();