Javascript 基于css的角度ui网格动态事件

我目前正在使用的项目。在浏览用于使其工作的css（通过firebug）时，我偶然发现了一些我以前从未见过的东西

当包含ui网格的窗口调整大小时，

最大宽度：

和

最小宽度：

都会相应地更新

引用的css来自

events#4

---

我知道CSS可以从

外部文件

，或者在

标记中，或者在html标记中的

内联

中引用。。。但是

事件#4

似乎不符合任何这些描述。。。那么它是如何工作的呢？

它被一些称为

ui-grid-style

的角度ui-grid指令动态设置为内联样式

你可以搜索他们的教程网格，你会发现类似的东西

<style class="ng-binding" ui-grid-style="">
        .grid1442752024758 {
        /* Styles for the grid */
    }
    .grid1442752024758 .ui-grid-row, .grid1442752024758 .ui-grid-cell, .grid1442752024758 .ui-grid-cell .ui-grid-vertical-bar {
    height: 30px;
    }
    .grid1442752024758 .ui-grid-row:last-child .ui-grid-cell {
    border-bottom-width: 0px;
    }
    /*
    .ui-grid[dir=rtl] .ui-grid-viewport {
    padding-left: px;
    }
    */
    .grid1442752024758 .ui-grid-coluiGrid-0007 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0008 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0009 { min-width: 161px; max-width: 161px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-canvas { width: 483px; height: 3000px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-header-canvas { width: 500px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-header-canvas { height: inherit; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-viewport { width: 500px; height: 168px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-header-viewport { width: 500px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-footer-canvas { width: 500px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-footer-viewport { width: 500px; }
    .grid1442752024758 .ui-grid-footer-aggregates-row { height: 30px; } .grid1442752024758 .ui-grid-footer-info { height: 30px; }
    .grid1442752024758 .ui-grid-coluiGrid-0007 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0008 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0009 { min-width: 161px; max-width: 161px; }
</style>

.grid1442752024758{
/*网格的样式*/
}
.grid1442752024758.ui网格行，.grid1442752024758.ui网格单元格，.grid1442752024758.ui网格单元格.ui网格垂直条{
高度：30px；
}
.grid1442752024758.ui网格行：最后一个子.ui网格单元格{
边框底宽：0px；
}
/*
.ui网格[dir=rtl].ui网格视口{
左：px；
}
*/
.grid1442752024758.ui-grid-coluiGrid-0007{最小宽度：161px；最大宽度：161px；}.grid1442752024758.ui-grid-coluiGrid-0008{最小宽度：161px；最大宽度：161px；}.grid1442752024758.ui-grid-coluiGrid-0009{最小宽度：161px；最大宽度：161px；}
.grid1442752024758.ui网格渲染容器体.ui网格画布{宽度：483px；高度：3000px；}
.grid1442752024758.ui网格渲染容器体.ui网格头画布{宽度：500px；}
.grid1442752024758.ui grid render container body.ui grid header canvas{height:inherit；}
.grid1442752024758.ui网格渲染容器体.ui网格视口{宽度：500px；高度：168px；}
.grid1442752024758.ui网格渲染容器体.ui网格标题视口{宽度：500px；}
.grid1442752024758.ui网格渲染容器体.ui网格页脚画布{宽度：500px；}
.grid1442752024758.ui网格渲染容器体.ui网格页脚视口{宽度：500px；}
.grid1442752024758.ui网格页脚聚合行{高度：30px；}.grid1442752024758.ui网格页脚信息{高度：30px；}
.grid1442752024758.ui-grid-coluiGrid-0007{最小宽度：161px；最大宽度：161px；}.grid1442752024758.ui-grid-coluiGrid-0008{最小宽度：161px；最大宽度：161px；}.grid1442752024758.ui-grid-coluiGrid-0009{最小宽度：161px；最大宽度：161px；}