angular自定义组件popbox练习日志（一）

angular用了有一段时间了，基本的使用问题已经很熟练了，但是angular组件的缺乏让开发的时候比较头疼，没有合适的组件只能妥协，使用基本的使用方法去实现本来已经设计好的比较好的交互体验，这样的结果就是交互体验打了折扣。
言归正传，这次的自定义组件的目标是弹出框，之所以要研究弹出框是因为弹出框应该算是比较有代表性的组件之一，需要处理的问题包含定位、数据传递、DOM操作、事件处理等等，把这个搞定了，基本做其它的各类组件开发可以上手了。

终极目标达到类似下面的效果，要求：弹出框内容可定义，组件位置与事件触发源位置关联。

下面开工

---

阶段目标：

本篇要解决的问题是弹出相应的层，并解决定位问题、大小问题、内容填充的自定义、鼠标背景事件（鼠标在其它地方点击的时候自动关闭弹出框）问题。

step1:定义内个ng-template

    //定义popbox的父容器    <script type="text/ng-template" id="popbox.html">        <div class='popbox'>        </div>    </script>    //定义内容模板，随便放了点东西    <script type="text/ng-template" id="labels.html">        <h3>labels</h3>    </script>    //定义另外一个内容模板，用来测试popbox自定义内容填充    <script type="text/ng-template" id="labels1.html">        <h3>另外一个labels</h3>    </script>

step2:定义一个factory，用来计算事件源的位置坐标（从一个网站“偷”来的，部分代码反混淆了）

    angular.module("ui.bootstrap.position", []).factory("$position", ["$document", "$window",        function ($document, $window) {            function getStyle(element, styleName) {                return element.currentStyle ? element.currentStyle[styleName] : $window.getComputedStyle ? $window.getComputedStyle(element)[styleName] : element.style[styleName];            }            function isStatic(element) {                return "static" === (getStyle(element, "position") || "static")            }            var e = function (b) {                for (var c = $document[0], e = b.offsetParent || c; e && e !== c && isStatic(e) ;)                    e = e.offsetParent;                return e || c            };            return {                position: function (element) {                    var offset = this.offset(element),                    parentOffset = {                        top: 0,                        left: 0                    },                    f = e(element[0]);                    f != $document[0] && (parentOffset = this.offset(angular.element(f)), parentOffset.top += f.clientTop - f.scrollTop, parentOffset.left += f.clientLeft - f.scrollLeft);                    var g = element[0].getBoundingClientRect();                    return {                        width: g.width || element.prop("offsetWidth"),                        height: g.height || element.prop("offsetHeight"),                        top: offset.top - parentOffset.top,                        left: offset.left - parentOffset.left                    }                },                offset: function (c) {                    var d = c[0].getBoundingClientRect();                    return {                        width: d.width || c.prop("offsetWidth"),                        height: d.height || c.prop("offsetHeight"),                        top: d.top + ($window.pageYOffset || $document[0].documentElement.scrollTop),                        left: d.left + ($window.pageXOffset || $document[0].documentElement.scrollLeft)                    }                },                positionElements: function (a, b, c, d) {                    var e, f, g, h, i = c.split("-"),                    j = i[0],                    k = i[1] || "center";                    e = d ? this.offset(a) : this.position(a),                    f = b.prop("offsetWidth"),                    g = b.prop("offsetHeight");                    var l = {                        center: function () {                            return e.left + e.width / 2 - f / 2                        },                        left: function () {                            return e.left                        },                        right: function () {                            return e.left + e.width                        }                    },                    m = {                        center: function () {                            return e.top + e.height / 2 - g / 2                        },                        top: function () {                            return e.top                        },                        bottom: function () {                            return e.top + e.height                        }                    };                    switch (j) {                        case "right":                            h = {                                top: m[k](),                                left: l[j]()                            };                            break;                        case "left":                            h = {                                top: m[k](),                                left: e.left - f                            };                            break;                        case "bottom":                            h = {                                top: m[j](),                                left: l[k]()                            };                            break;                        default:                            h = {                                top: e.top - g,                                left: l[k]()                            }                    }                    return h                }            }        }]);

step3:定义$popbox 使用provider，

    angular.module("ui.bootstrap.popbox", []).provider("$popbox", function () {        this.$get = ["$document", "$templateCache", "$compile", "$rootScope", "$position",            function ( $document, $templateCache, $compile, $rootScope, $position) {                function popbox(options) {                    var _this = this;                    this.options = angular.extend({}, options);                    var bodyEl = $document.find("body");                    var dom = angular.element($templateCache.get("popbox.html"));                    dom.append($templateCache.get(this.options.templateUrl));                    this.elmentEL = dom;                    this.handleBackDropClick = function ($event) {                        for (var element = $event.target, notpopbox = true; element;) {                            if ($(element).hasClass("popbox")) {                                notpopbox = !1;                                break                            }                            element = element.parentNode                        }                        if (notpopbox)                            _this.close();                    };                    this.close = function () {                        _this.elmentEL.remove();                    };                    this.open = function ($event, $scope) {                        $(".popbox").each(function () {                            $(this).scope().popbox.close()                        })                        var sourcePosition = $position.position($($event.target));                        this.elmentEL.css("top", sourcePosition.top + sourcePosition.height + "px");                        this.elmentEL.css("left", sourcePosition.left + "px");                        this.elmentEL.css("width", _this.options.width + "px");                        this.elmentEL.css("height", _this.options.height + "px");                        bodyEl.append(this.elmentEL);                        $compile(this.elmentEL)($scope);                        $document.bind("mousedown", this.handleBackDropClick);                    };                }                return {                    popbox: function (options) {                        return new popbox(options)                    }                };            }];    });

step4:定义module依赖关系,初始化app对象

    angular.module("ui.bootstrap", ["ui.bootstrap.position", "ui.bootstrap.popbox"]);    //定义了上面一行后，app初始化时只需要定义依赖ui.bootstrap就可以了。    var app = angular.module('app', ['ngRoute', 'ngResource', "chart.js", "ui.bootstrap"]);

step5:定义controll

    app.controller("dashbordCtl", function ($scope, $http, $location, $popbox) {        $scope.js_openlabel = function ($event) {            $popbox.popbox({ templateUrl: "labels.html", width: 100, height: 300 }).open($event, $scope);        }        $scope.js_openlabel1 = function ($event) {            $popbox.popbox({ templateUrl: "labels1.html", width: 200, height: 400 }).open($event, $scope);        }        //这里定义了两个方法用来打开弹出框，注意两个方法中使用templateUrl是不一样的。    });

step6:html标签

<body ng-controller="dashbordCtl">    <h4>测试popbox</h4>    给按钮几个left    <button ng-click="js_openlabel($event)">popbox</button>    <br />    <br />    <br />    <button ng-click="js_openlabel1($event)">popbox</button></body>

ok下面可以看效果了。