如何在angular.js中優雅的使用ui.bootstrap的modal組件

Jrain 發布于2019-08-22 11:16 / 920人閱讀

摘要：提供唯一的方法配置。即文件名，在同一個頁面有多個不同業務的模態框的情況下很方便點擊確認按鈕執行的代碼可以從中獲取和字段進一步操作發起請求等點擊取消按鈕執行的代碼

ui.bootstrap的modal組件可以很方便地實現頁面controller與模態框controller之間通信，特別是彈出的模態框中有比較復雜的表格信息需要用戶填寫，下面切入主題：

注冊全局模態框實例的controller

angular.module("myApp.Controllers", [
        "ui.bootstrap"
])
.controller("appModalInstanceCtrl", function ($scope,$uibModalInstance,modalDatas) {
      var $ctrl = this;
      $scope.modalDatas = modalDatas; //雙向綁定，方便在確認中回傳可能修改的字段
     
      // $ctrl.insta
      $ctrl.ok = function (val) {
        $scope.modalDatas.result = val;
        $uibModalInstance.close(
          $scope.modalDatas  //在模態框View中修改的值傳遞回去，view中可以直接添加屬性
        );
      };
      
      $ctrl.cancel = function () {
        $uibModalInstance.dismiss("cancel");
      };
    })

新建模板文件src/templates/modalViews/confirm.html


    標題



    
      確認信息：
      
    
    
      備注信息：

頁面觸發代碼：

在管理頁面出發代碼的controller中注冊openModal函數

使用ui.bootstrap提供的服務$uibModal來創建模態框，只需要簡單的配置模態框視圖和控制器。$uibModal提供唯一的方法open(options)配置。

options參數：
animation (Type: boolean, Default: true) 模態框打開/關閉動畫控制
appendTo (Type: angular.element, Default: body) 指定將模態框代碼插入位置，默認插入到body
backdrop (Type: boolean|string, Default: true) 遮罩層顯示控制
backdropClass (Type: string) 給遮罩層添加額外class
bindToController (Type: boolean, Default: false) - 當使用 controllerAs（比如設置為$ctrl）并且此屬性設置為true時,可以把$scope綁定到controller.主意$scope是能夠管理模態框的scope,也就是說，如果模態框默認插入到body，那么會將管理body標簽的控制器綁定到$ctrl,所以最好結合appendTo一起使用。
component (Type: string, Example: myComponent) 將模態框當做組件方式使用
controller (Type: function|string|array, Example: MyModalController) 指定模態框控制器
controllerAs (Type: string, Example: ctrl) 控制器別名
resolve (Type: Object) - 給模態框傳遞數據;
templateUrl (Type: string) 指定模態框視圖層模板
size (Type: string, Example: lg) 指定模態框大小

還有很多屬性，可以到官網查詢，比如控制多層模態框等等。

$scope.openModel = function (size, type) {
      //type即view文件名，在同一個頁面有多個不同業務的模態框的情況下很方便
      var tplUrl = "./src/templates/modalViews/" + type + ".html";
      $scope.modalDatas = {
          msg: "Hello World!"
      };

      var modalInstance = $uibModal.open({
        animation: true,
        ariaLabelledBy: "modal-title",
        ariaDescribedBy: "modal-body",
        templateUrl: tplUrl,
        controller: "appModalInstanceCtrl",
        controllerAs: "$ctrl",
        size: size,
        resolve: {
          modalDatas: function () {
            return $scope.modalDatas;
          }
        }
      });
      modalInstance.result.then(function (datas) {
        // 點擊確認按鈕執行的代碼
        //可以從datas中獲取msg和content字段
        //進一步操作：發起http請求等       
      }, function () {
        // 點擊取消按鈕執行的代碼
        console.info("Modal dismissed at: " + new Date());
      });
    };

GPU云服務器云服務器在php中使用組件怎樣在oss中使用帶ip限制的訪問控制 webrtc如何在web中使用在php中如何使用n

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92090.html

angularjs+requirejs實現按需加載的全面實踐

摘要：想同時實現這些目標，就必須有一套按需加載的機制，頁面上展現的內容和所有需要依賴的文件，都可以根據業務邏輯需要按需加載。最近都是基于做開發，所以本文主要圍繞提供的各種機制，探索全面實現按需加載的套路。注意必須設置，否則變化以后，不截獲。在進行有一定規模的項目時，通常希望實現以下目標：1、支持復雜的頁面邏輯（根據業務規則動態展現內容，例如：權限，數據狀態等）；2、堅持前后端分離的基本原則...

TerryCai 2019-08-19 17:39 評論0 收藏0
使用gulp+bower構建Angular.js項目

摘要：本文重點是詳細介紹項目的構建。是優秀的自動化項目構建工具，我們將用它完成等文件的的測試檢查合并壓縮格式化瀏覽器自動刷新部署文件生成，并監聽文件在改動后重復指定的這些步驟熱重載。是項目依賴管理工具。環境需求運行在環境，首先安裝。本文重點是詳細介紹Angular.js項目的構建。gulp是優秀的自動化項目構建工具，我們將用它完成 javascript/less/css/html/imag...

roland_reed 2019-08-20 18:04 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

JouyPub 2019-08-02 10:10 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

vslam 2019-08-30 15:53 評論0 收藏0