AngularJS教程二十五—— 模態窗指令

模態窗指令ed-modal

模態窗指令用來顯示彈窗。

一 使用方法：

<div ed-modal="modal" data-options="title: '彈出框演示', icon: 'fa-plus', width: 760, onOkClick: function() {alert('您點選了確定');}, onHidden: function(){alert('關閉了');}">
    <div>
        我是一個彈出框，通過data-options="title: '彈出框演示', icon: 'fa-plus', width: 760, onOkClick: function() {alert('您點選了確定');}, onHidden: function(){alert('關閉了');}"
        彈出框演示'來設定屬性：標題、圖示、寬度、事件
    </div>
</div>

ed-modal定義模態框，並指定模態窗的名稱，支援巢狀

• 通過`data-options設定模態窗屬性
  • title標題
  • icon標題前的圖示class樣式
  • width：寬度，不需帶上單位，預設為500
  • static：設定失去焦點是否關閉，預設為false關閉，
  • defaultButton是否顯示預設按鈕，預設true。如果彈出框中為需要校驗的form，可以隱藏預設按鈕，在彈窗內容中自己新增按鈕來實現
  • onOkClick確定事件，可以為匿名function，也可為$scope的方法名稱
  • onHidden模態窗關閉時觸發事件，同上
• 繫結到ed-modal名稱下有以下方法：
  • show()顯示模態窗
  • hide()隱藏模態窗

注意

該指令需結合eastdigit-assert 0.20160428.09以上使用，並匯入下列資源：

    <!-- 加在colorpicker.css那一行之後 -->
    <link href="./assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
    <link href="./assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" />

    <!-- 加在bootstrap-switch.min.js那一行之後 -->
    <script src="./assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
    <script src="./assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>