h5 关于自定义模板的图片组合 用的是angular

<!--组合选择弹出框，这一层的内容是点击选择后的结果-->
<div id="controltbody_img_selepop" class="modal-dialog modal-sm dn">
    <div class="modal-content" modal-transclude="">
        <div class="modal-header ng-scope">
            <button type="button" class="close" onclick="cancel_controltbody_img_selepop()" data-dismiss="modal">
                <span aria-hidden="true">×</span>
                <span class="sr-only">关闭</span>
            </button>
            <h4 class="modal-title">选择布局</h4>
        </div>
        <div class="modal-body text-center ng-scope">
            <div class="layout-table clearfix">
                <ul ng-repeat="item in layout_sele_result track by $index" class="layout-cols">
                    <li ng-repeat="row in item track by $index" onmousemove="setlayoutbackcolor(this)"
                        onclick="setlayout(this)" x="{{row.x}}" y="{{row.y}}">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

 

/*---鼠标点击选择组合---*/
function setlayout(ob) {
    var x = $(ob).attr('x');
    var y = $(ob).attr('y');
    //通过controller来获取Angular应用
    var appElement = document.querySelector('[ng-controller=ctrl]');
    //获取$scope变量
    var $scope = angular.element(appElement).scope();
    var xspan = x - layout_fir_x + 1;
    var yspan = y - layout_fir_y + 1;
    var e = {
        'fir': {'x': layout_fir_x, 'y': layout_fir_y},
        'x_span': xspan,
        'y_span': yspan,
        'url': '',
        'urltitle': '请选择',
        "wxapp_url":"",
        "wxapp_url_title":"请选择",
        'src': '',
        'arr': []
    }
    /*--按行添加数据--*/
    for (var i = layout_fir_y; i <= y; i++) {
        for (var j = layout_fir_x; j <= x; j++) {
            var em = {'x': j, 'y': i};
            e.arr.push(em);
        }
    }
    $scope.content.data.push(e);
    $scope.$apply();
    layout_createtable();
    cancel_controltbody_img_selepop();
    layout_fir_x = 0;
    layout_fir_y = 0;
}
/*--关闭弹出框--*/
function cancel_controltbody_img_selepop() {
    $("#controltbody_img_selepop").fadeOut(3);
}

/*-------------布局创建表格--------*/
function layout_createtable() {
    //通过controller来获取Angular应用
    var appElement = document.querySelector('[ng-controller=ctrl]');
    //获取$scope变量
    var $scope = angular.element(appElement).scope();
    $("#showlayouttboay"+$scope.content.no).html('');
    $scope.content.layout_htm = "";
    var data = $scope.content.data;
    var htm = "";
    /*--从行开始--*/
    for (var i = 0; i <= 3; i++) {
        htm += "<tr>";
        for (var j = 0; j <= 3; j++) {
            var e1 = {'x': j, 'y': i};
            var iscanshow = true;
            for (var ii = 0; ii < $scope.content.data.length; ii++) {
                var aryd = $scope.content.data[ii].arr;
                /*--如果元素处于数组内--*/
                if (isinlayoutArr(e1, aryd)) {
                    iscanshow = false;
                    var ee = $scope.content.data[ii];
                    /*---如果是组合的第一个元素,要进行合并处理---*/
                    if (e1.x == ee.fir.x && e1.y == ee.fir.y) {
                        if (ee.src == "") {
                            htm += "<td style='border-width:" + $scope.content.border_width + "px'  " +
                                "colspan='" + ee.x_span + "' rowspan='" + ee.y_span + "'>";
                            if (ee.url != "") {
                                htm += "<a ul='" + ee.url + "' onclick='tpgrgoto(this)'>" + 160 * ee.x_span + "x" + 160 * ee.y_span + "</a></td>";
                            } else {
                                //htm +=""+160*ee.x_span+"x"+160*ee.y_span+"</td>";
                                htm += "<span class='spanbox'>" + 160 * ee.x_span + "x" + 160 * ee.y_span + "</span>";
                            }
                        } else {
                            htm += "<td style='border-width:" + $scope.content.border_width + "px'  " +
                                "colspan='" + ee.x_span + "' rowspan='" + ee.y_span + "'>";
                            if (ee.url != "") {
                                htm += "<a ul='" + ee.url + "' onclick='tpgrgoto(this)'><img src='" + ee.src + "' style='width:100%'></a></td>";
                            } else {
                                htm += "<img src='" + ee.src + "' style='width:100%'></td>";
                            }

                        }
                    }
                }
            }
            if (iscanshow) {
                htm += "<td style='border-width:" + $scope.content.border_width + "px' " +
                    " class='empty' x='" + j + "' y='" + i + "'><span class='spanbox'></span></td>";
            }
        }
        htm += "</tr>";
    }

    //同步到Angular控制器中
    $scope.content.layout_htm = htm;
    $scope.$apply();

    $("#showlayouttboay" + $scope.content.no).html(htm);
    $("#controltbody_img" + $scope.content.no).html(htm);

    /*--鼠标移动上面的效果--*/
    $(".controltbody_img .empty").hover(
        function () {
            $(this).addClass('on');
        }, function () {
            $(this).removeClass('on');
        });
    /*--鼠标点击的效果--*/
    $(".controltbody_img .empty").click(function () {
        layouteleclick(this);
    });

}

/*--判断是否在数组中--*/
function isinlayoutArr(e, arr) {
    for (var i = 0; i < arr.length; i++) {
        if (e.x == arr[i].x && e.y == arr[i].y) {
            return true;
        }
    }
    return false;
}

/*---单击选择,主要是弹出弹出框---*/
var layout_fir_x = 0;
var layout_fir_y = 0;
function layouteleclick(ob) {
    var x = $(ob).attr('x');
    var y = $(ob).attr('y');
    layout_fir_x = x;
    layout_fir_y = y;
    $(".layout-cols li").removeClass('on');
    //通过controller来获取Angular应用
    var appElement = document.querySelector('[ng-controller=ctrl]');
    //获取$scope变量
    var $scope = angular.element(appElement).scope();
    $scope.layout_sele_result = [];
    /*--按行顺序--*/
    for (var i = x; i <= 3; i++) {
        var ele = [];
        for (var j = y; j <= 3; j++) {
            var e1 = {'x': i, 'y': j};
            /*--当选择了的为空*/
            if ($scope.content.data == undefined) {
                ele.push(e1);
            } else {
                if ($scope.content.data.length <= 0) {
                    ele.push(e1);
                } else {
                    var iscanpush = true;
                    for (var ii = 0; ii < $scope.content.data.length; ii++) {
                        var aryd = $scope.content.data[ii].arr;
                        ismolan = false;
                        for (var jj = 0; jj < aryd.length; jj++) {
                            var ismolan = true;
                            /*----如果初始位置x,y小于选择元素的位置----*/
                            if (x <= aryd[jj].x && y <= aryd[jj].y) {
                                /*----如果元素(j,i)大于选中其中的一个元素----*/
                                if (i >= aryd[jj].x && j >= aryd[jj].y) {
                                    iscanpush = false;
                                    break;
                                }
                            }
                        }
                    }
                    if (iscanpush) {
                        ele.push(e1);
                    }
                }
            }
        }
        if (ele.length > 0) {
            $scope.layout_sele_result.push(ele);
            ele = [];
        }
    }
    if ($scope.layout_sele_result.length > 0) {
        if ($scope.layout_sele_result.length == 1) {
            if ($scope.layout_sele_result[0].length == 1) {
                var el = {
                    'fir': {'x': x, 'y': y},
                    'x_span': 1,
                    'y_span': 1,
                    'url': '',
                    'urltitle': '请选择',
                    "wxapp_url":"",
                    "wxapp_url_title":"请选择",
                    'src': '',
                    'arr': [{'x': x, 'y': y}]
                };
                $scope.content.data.push(el);
                $scope.$apply();
                layout_createtable();
            } else {
                //同步到Angular控制器中
                $scope.$apply();
                $("#controltbody_img_selepop").fadeIn(3);
            }
        } else {
            //同步到Angular控制器中
            $scope.$apply();
            $("#controltbody_img_selepop").fadeIn(3);
        }
    }

};