angular 與 layer 集成過程

layer 的提示框和彈層確實也好用，在使用angular的前提下，使用layer遇到諸多麻煩，記錄下來。

在類型是1頁面層，主要問題在遮罩方面，形成沒法編輯。

開始：引入layer 樣式，angular集成layer.js的依賴項設定，用require解決。

因爲layer彈層的z-index 只默認是很大19891014，bootstrap的z-index設定1030，autocomplete的z-index是99999，這就形成彈層沒法編輯。

首先解決這個問題以前，你們可能遇到的問題是 layer對象是undefined，雖然已經引入了。

我遇到的是定義require模塊時，沒按輸出順序寫對，正確的最好把有輸出對象的放在前面，用於注入接收參數。以下：

 define(['app', 'laydate', 'layer', 'autoSvc', 'datefmt'], function (app, laydate, layer) {}); 

沒有輸出的放在後面，只用來異步加載js文件。

其次，在解決彈層不能編輯的問題。因爲主要使用angular，因此儘可能少用jquery的方式作事。

最開始沒法解決，想到最笨的方法是彈層參數： content: $('#lay').html() ，可是強度依賴jquery操做界面數據，不符合預期。

指望拿到原來對象，而不是拷貝，不要再html()了。

最後解決仍是得依靠瀏覽器的調試工具，發現運行時界面元素遮罩層的z-index只要大於1030就沒法編輯，這個就是bootstrap 3.3.7裏面默認設定的。

因而修改layer彈層的初始zIndex值，只要小於1030就能夠編輯，可是界面其餘表單也能夠編輯，不是預期的。

那就在界面加個遮罩層： #cover{display: none;top:0;left: 0;height: 100%;width: 100%; position: fixed; z-index: 1; background-color: rgb(0, 0, 0); opacity: 0.3;}

假如不修改bootstrap的z-index值，layer open時若設定爲zIndex=1000，則只能彈出30次，由於layer彈層每次z-index值都會+1，坑啊。

起初的想法是修改bootstrap的z-index爲無窮大，而後再也不設定layer的zIndex參數，測試後可行。

問題又來了，autocomplete的z-index = 99999，layer的初始值就比它大，繼續填坑。

那就把bootstrap 設定 和autocomplete同樣值 = 99999，測試後autocomplete和laydate沒問題，接下來就是layer彈層。

自寫的遮罩層仍是要的，layer初始zIndex = 2，大約不關閉瀏覽器狀況下，彈出10萬次失效，畢竟是單頁面。

估計不多不關閉瀏覽器狀況下，運行這麼長時間和次數，算是angular 和 layer 集成了吧。

如下是主要代碼：css

    <link href="static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="static/layer/theme/default/layer.css" rel="stylesheet"/>

require.config 配置路徑：

        'jquery': 'static/jquery-1.11.3/jquery.min',
        'jqueryMig': 'static/jquery-migrate-1.4.1.min',
        'autocomplete': 'static/jquery-autocomplete/jquery.autocomplete.min',
        'bootstrap': 'static/bootstrap-3.3.7-dist/js/bootstrap.min',
        'angular': 'node_modules/angular/angular.min',
        'ui-router': 'node_modules/angular-ui-router/release/angular-ui-router.min',
        'laydate': 'static/laydate/laydate',
        'layer': 'static/layer/layer'

bootstrap.css 修改部分：

.navbar-fixed-top {
    top: 0;
    z-index: 99999;
}

自加遮罩層樣式：

/*  遮罩層 */
#cover{display: none;top:0;left: 0;height: 100%;width: 100%; position: fixed; z-index: 1; background-color: rgb(0, 0, 0); opacity: 0.3;}

彈層測試html：

<!-- 測試彈出層 -->
<div id="cover"></div>
<div id="lay" style="display: none;">
    <div style="padding: 20px;">
        <input type="text" ng-model="ui.usr_label" class="form-control">
    </div>
</div>

彈層測試js：

            $('#cover').css('display','block');
            layer.open({
                content: $('#lay'),
                type: 1,
                area: ['600px', '400px'],
                closeBtn: 2,
                title: false,
                zIndex: 2,
                cancel: function (index, layero) {
                    $('#cover').css('display','none');
                }
            });

 ========================2018.11.03 如下

關於layer封裝的幾個方法：

 1 define(['app','layer'], function (app, layer) {
 2     app.svc('layerSvc', function () {
 3         return {
 4             pageIndex: 0,
 5             loadIndex: 0,
 6             loadTimer: 0,
 7             open: function (id, ex) {
 8                 $('#cover').css('display','block');
 9                 var def = {
10                     content: $(id),
11                     type: 1,
12                     //area: ['600px', '400px'],
13                     closeBtn: 2,
14                     title: false,
15                     zIndex: 2,
16                     cancel: function (index, layero) {
17                         $('#cover').css('display','none');
18                     }
19                 };
20                 if (ex) Object.assign(def, ex);
21                 this.pageIndex = layer.open(def);
22             },
23             load: function (timeout, fun) {
24                 var idx = layer.load(0, {shade:0.3});
25                 this.loadIndex = idx;
26                 var t = setTimeout(function () {
27                     layer.closeAll();
28                     layer.alert('對不起，加載已超時！', {icon: 5,title: '錯誤'});
29                 }, timeout);
30                 this.loadTimer = t;
31                 fun(t, idx);
32             },
33             error:function (msg) {
34                 layer.alert(msg, {icon: 5,title: '錯誤'});
35             },
36             confirm:function (msg, fun) {
37                 layer.confirm(msg, {icon: 3, title:'確認'}, function (index) {
38                     layer.close(index);
39                     fun();
40                 });
41             },
42             closePage: function () {
43                 $('#cover').css('display','none');
44                 layer.close(this.pageIndex);
45             },
46             closeLoad: function () {
47                 clearTimeout(this.loadTimer);
48                 layer.close(this.loadIndex);
49             }
50         }
51     })
52 });

方法open和closePage是成對的，在open的page上肯定時調用closePage方法，來關閉彈層。

例如： layerSvc.open('#divAddRole', {area: ['350px', '200px'], title:'添加角色'}); 

在保存時關閉彈層：

1             $http.post('/SvcWms/AddRole', data).then(function (value) {
2                 layerSvc.closePage();
3                 layer.msg('保存成功');
4                 $scope.getRoles();
5             })

另一個加載等待層，超時時間設定爲5秒，調用：

1         /* 獲取所有角色 */
2         $scope.getRoles = function () {
3             layerSvc.load(5000, function () {
4                 $http.get('/SvcWms/GetAllRoles').then(function (resp) {
5                     layerSvc.closeLoad();
6                     $scope.roles = resp.data.Data;
7                 })
8             })
9         };

爲了截圖故意把後臺服務關閉，正常閃過仍是能看到。若超時就提示：

角色權限管理的界面：