2013-03-14 39 views
10

Live Example角UI引導模態條id和class屬性

添加以下Angular UI Bootstrap Modal:在

<div id="my-id" class="my-class" modal="opened"> 
    <p>Modal Here</p> 
</div> 

結果:

<div class="modal ng-scope"> 
    <p>Modal Here</p> 
</div> 

爲什麼idclass屬性被剝離?

我想在對話框上設置一些CSS樣式,例如對話框的寬度,或樣式化對話框的內部元素。我怎麼能做到這一點?

+1

'modal'是'dialog'的一個便利指令,它具有更多的靈活性和選項。 – charlietfl 2013-03-14 10:46:30

+0

我試圖設置內部'div'的寬度,但結果非常糟糕。 – 2013-03-14 10:49:54

回答

8

這是github issue解釋爲什麼id被剝離。

至於類,我不知道爲什麼會剝離年代,但你可以使用$dialog options指定類(這將解決您的問題):

<div id="my-id" modal="opened" options="{dialogClass: 'modal my-class'}"> 
    <p>Modal Here</p> 
</div> 
+0

看起來像設置'dialogClass'導致模式不能正常顯示:http://plnkr.co/edit/PyDqFwY8ejhZVqvzjwq6?preview&p=preview。我想這是因爲設置'dialogClass'刪除了'modal'類。任何想法如何解決這個問題? – 2013-03-14 11:14:21

+0

我想我可以設置'dialogClass:'modal my-class'',但它看起來有點亂。有沒有更好的辦法? – 2013-03-14 11:23:21

+0

是的,我忘了模態班。不知道有什麼其他的方法,沒有用過這麼多。 – Stewie 2013-03-14 11:26:10

12

因爲我只是碰到這種刺激性的問題來了我自己和文檔和默認行爲並不明顯。您可以在其他類通過$ modal.open()方法使用windowClass選項現在傳:

var modalInstance = $modal.open({ 
     templateUrl: 'templateUrl.html', 
     controller: Controller, 
     windowClass: 'custom-css-class', 
     ... 
    }); 

無法設置一個ID,雖然它是瘸子。更多信息在官方angular-ui modal docs

+0

是的。我一直在掙扎幾天。最後這是答案。 – 2014-09-07 09:43:33

+0

有些答案讓生活變得如此簡單。榮譽。 – 2017-01-04 10:55:28