UEGrids.js

最近项目需要，接触了一下angularjs, 感觉双向绑定非常的强大，于是花几个小时的时间，把项目里要实现的一个类似表格数据交换的功能写了一下，angular支持module封装，上手后使用感觉思维也很清晰。于是贴一下主要代码：

首先是页面

<uegrids grids="gridsLeft" selected="selected" width="200"></uegrids>

这个是自定义的uegrids指令，在controller里面我定议了一个数组对象$scope.gridsLeft, 一个变量$scope.selected，和一个元素属性 width = 200;

$scope.gridsLeft = [
                    { id: "10010", with: "red", value: 0.2000 },
                    { id: "10010", with: "red", value: 0.2010 },
                    { id: "10010", with: "red", value: 0.2013 },
                    { id: "10010", with: "red", value: 0.2014 },
                    { id: "10010", with: "red", value: 0.2002 },
                    { id: "10010", with: "red", value: 0.2012 },
                    { id: "10010", with: "red", value: 0.2020 },
                    { id: "10010", with: "red", value: 0.2030 },
                    { id: "10010", with: "red", value: 0.2003 },
                    { id: "10010", with: "red", value: 0.2013 },
                    { id: "10010", with: "red", value: 0.2025 },
                    { id: "10010", with: "red", value: 0.2034 },
                    { id: "10010", with: "red", value: 0.2005 },
                    { id: "10010", with: "red", value: 0.2015 },
                    { id: "10010", with: "red", value: 0.2026 },
                    { id: "10010", with: "red", value: 0.2038 }
            ];

　　　　　　　　$scope.selected = false;
　　　　　　　　$scope.$watch("selected", function(bool) {
　　　　　　　　　　console.log(bool);
　　　　　　　　});

我使用的是编辑器webstrom 8,代码自动提示完成包含了requirejs、angularjs，真的很方便

然后看下指令部分：

angular.module('directives', []).
        factory("setPos", function() {
            return function(width, rows) {
                console.time("setPos");
                var posArr = [],
                    liW = width/ 4,
                    liH = 25,
                    row = 0,
                    col = 1;

                for (var row = 0; row < rows; row++) {
                    for (var col = 1; col <= 4; col++) {

                        posArr.push({left:col*liW, top:row*liH});
                    }
                }
                console.timeEnd("setPos");
                return posArr;
            }
        }).
        directive('uegrids', function() {
            return {
                restrict: "E",
                scope: {
                    grids: "=",
                    selected: "="
                },
                templateUrl: "template/uegrids.html",
                controller: function($scope, $element, setPos) {
                    // console.info($scope.grids, $element);
                    // this.grids = $scope.grids;
                    var width = $element.attr("width") || 200,
                        rows = $scope.grids.length/ 4,
                        selectedId = null;

                    $scope.setGrid = function(grid) {
                        return grid.with ? grid.with : "gray";
                    };

                    $scope.selectGrid = function(event) {
                        if (event.toElement.tagName.toUpperCase() == "LI") {
                            $(event.toElement).parent().find("li").removeClass("active");
                            $(event.toElement).addClass("active");
                            var curId = Number(event.toElement.dataset.id), temp;
                            if (curId != selectedId && selectedId !== null) {
                                $scope.selected = true;
                                // 交换数据
                                temp = $scope.grids[selectedId];
                                $scope.grids[selectedId] = $scope.grids[curId];
                                $scope.grids[curId] = temp;
                                console.log("交互后，索引是", selectedId);
                                $(event.toElement).removeClass("active");
                                selectedId = null;
                            } else {
                                // $scope.selected = false;
                                selectedId = curId;
                            }
                        }
                        event.preventDefault();
                        return false;
                    };

                    var gridPos = setPos(width, rows);
                    $scope.setPosition = function(index) {
                        var pos = gridPos[index];
                        return "left: "+pos.left+"px; top: "+pos.top+"px";
                    };

                },
                link: function(scope, element, attribute, ctrl) {
                    /*console.log(scope.grids, element, attribute);*/
                    var lis = element.find("li");
                },
                replace: true
            }
        })

这里代码有点罗嗦，反正也是第一次写指令，将就一下。然后就是我在requirejs引用了jquery, angualrjs自身有个qlite的dom操作模块，如果检测到引入了jquery,就会优先使用了jquery,我在指令里使用了dom操作。可能这不太符合angualrjs的提倡，但这里只是一个主要思路，并不是一个完整的项目，所以就不按use strict方式来了。

另外发现，在angularjs指令里做循环或计算操作，会使性能下降很快，比如：

<div class="uegrids" ng-click="selectGrid($event)">
    <ul>
        <li ng-class="setGrid(grid)" style="{{setPosition($index)}}" data-id="{{$index}}" ng-repeat="grid in grids">{{grid.value}}</li>
    </ul>
</div>

假如我在li里加一个ng-style="setPosition($index, grid)", 然后我在setPosition里面去获取$index, grid，然后一堆的计算位置，不好意思，在directive的controller或link里，可能会抛异常。比较好的做法是在controller里预先计算好位置，存到一个变量里面，这里setPosition($index), 只返回变量的引用值即可，效率很高。

数据的交互同于angular的双向绑定，让开发者减少了很多dom的操作，只需要通过简单的ng-click, ng-bind就可以在controller改变数据的同时，迅速地反映在页面上, 而且更妙的是使用scope: {a: "="},使得指令里的a和业务层controller里的a关联了起来，同时发生改变。

然后我在业务层提交的数据，也是指令层交换后的数据，一点也不需要额外做数据修改的处理。