成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

如何在angular.js中優(yōu)雅的使用ui.bootstrap的modal組件

Jrain / 1009人閱讀

摘要：提供唯一的方法配置。即文件名，在同一個(gè)頁面有多個(gè)不同業(yè)務(wù)的模態(tài)框的情況下很方便點(diǎn)擊確認(rèn)按鈕執(zhí)行的代碼可以從中獲取和字段進(jìn)一步操作發(fā)起請(qǐng)求等點(diǎn)擊取消按鈕執(zhí)行的代碼

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

注冊(cè)全局模態(tài)框?qū)嵗腸ontroller

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

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

頁面觸發(fā)代碼：

在管理頁面出發(fā)代碼的controller中注冊(cè)openModal函數(shù)

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

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

還有很多屬性，可以到官網(wǎng)查詢，比如控制多層模態(tài)框等等。

$scope.openModel = function (size, type) {
      //type即view文件名，在同一個(gè)頁面有多個(gè)不同業(yè)務(wù)的模態(tài)框的情況下很方便
      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) {
        // 點(diǎn)擊確認(rèn)按鈕執(zhí)行的代碼
        //可以從datas中獲取msg和content字段
        //進(jìn)一步操作：發(fā)起http請(qǐng)求等       
      }, function () {
        // 點(diǎn)擊取消按鈕執(zhí)行的代碼
        console.info("Modal dismissed at: " + new Date());
      });
    };

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92090.html

相關(guān)文章

  • angularjs+requirejs實(shí)現(xiàn)按需加載的全面實(shí)踐

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

    TerryCai 評(píng)論0 收藏0

  • 使用gulp+bower構(gòu)建Angular.js項(xiàng)目

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

    roland_reed 評(píng)論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    zxhaaa 評(píng)論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    JouyPub 評(píng)論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    vslam 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<