欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angularjs中的ui-bootstrap的使用教程

 更新時間：2017年02月19日 10:40:05   投稿：mrr  
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

1.新建uiBootstrap.html頁面，引入依賴的js和css類庫

2.新建uiBootstrap.js文件，定義一個uiModule 模塊，引入依賴的模塊

/**
 * Created by zhong on 2015/9/7.
 */
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});

3.定義dialog彈出窗口的模板

4.定義一個 UiController，并聲明一個用于打開dialog彈出框的函數(shù)openDialog

uiModule.controller("UiController",function($scope,$modal){
//打開dialog的函數(shù)
$scope.openDialog = function(){
$modal.open({
  templateUrl:"myModalContent.html",//dialog的id，與html建立的template的id一致
controller:"ModalController"http://指定dialog的controller
});
 };
})

5.定義dialog彈出框的 ModalController

這個controller中聲明彈出框中確認和取消按鈕的單擊事件的處理函數(shù)

controller("ModalController",function($scope, $modalInstance){
//定義dialog中的確認按鈕的點擊事件的處理函數(shù)
$scope.ok = function(){
$modalInstance.close();//
};
//定義dialog中的取消按鈕的點擊事件的處理函數(shù)
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
 }
});

5.在uiBootstrap.html文件中添加一個按鈕，用于打開窗口

<div ng-controller="UiController">
 <button ng-click="openDialog()" class="btn btn-default">打開彈出窗口</button>
</div>

6.效果

補充：

以上所述是小編給大家介紹的Angularjs中的ui-bootstrap的使用教程，希望對大家有所幫助！

相關(guān)文章

  • Angular.js之作用域scope''@'',''='',''&''實例詳解

    Angular.js之作用域scope''@'',''='',''&''實例詳解

    這篇文章主要介紹了Angular.js之作用域scope'@','=','&'實例詳解,需要的朋友可以參考下
    2017-02-02
  • AngularJs Using $location詳解及示例代碼

    AngularJs Using $location詳解及示例代碼

    本文主要介紹AngularJs Using $location的知識資料，這里整理了相關(guān)的資料，及簡單示例代碼，有興趣的小伙伴可以參考下
    2016-09-09
  • Angularjs中ng-repeat的簡單實例

    Angularjs中ng-repeat的簡單實例

    這篇文章主要介紹了Angularjs中ng-repeat的簡單實例的相關(guān)資料,這里提供兩個實例方法幫助大家徹底掌握這部分內(nèi)容，需要的朋友可以參考下
    2017-08-08
  • angularjs實現(xiàn)Tab欄切換效果

    angularjs實現(xiàn)Tab欄切換效果

    這篇文章主要為大家詳細介紹了angularjs實現(xiàn)Tab欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • Angular依賴注入optional?constructor?parameters概念

    Angular依賴注入optional?constructor?parameters概念

    這篇文章主要為大家介紹了Angular?依賴注入領(lǐng)域里?optional?constructor?parameters?的概念及使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-11-11
  • Angular路由ui-router配置詳解

    Angular路由ui-router配置詳解

    這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯，具有一定得參考借鑒價值，需要的朋友參考下吧
    2018-08-08
  • AngularJs Injecting Services Into Controllers詳解

    AngularJs Injecting Services Into Controllers詳解

    本文主要介紹AngularJs Injecting Services Into Controllers的知識,這里整理了一下相關(guān)資料，及示例代碼，幫助大家學習和理解，有興趣的小伙伴可以參考下
    2016-09-09
  • Angular.JS去掉訪問路徑URL中的#號詳解

    Angular.JS去掉訪問路徑URL中的#號詳解

    最近天天都在用AngularJS，各類文檔也都看過好幾遍，但總是些編程上的事找不到優(yōu)雅的解決辦法。今天終于把AngularJS的項目訪問路徑URL里的#號去掉了，這個問題不見得有多難，關(guān)鍵是花多長時間去理解AngularJS框架本身，下面來看看詳細介紹，需要的朋友可以參考下。
    2017-03-03
  • angularJs select綁定的model取不到值的解決方法

    angularJs select綁定的model取不到值的解決方法

    今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • SpringMVC簡單整合Angular2的示例

    SpringMVC簡單整合Angular2的示例

    這篇文章主要介紹了SpringMVC簡單整合Angular2的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論