`
流浪鱼
  • 浏览: 1673271 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

$uibModal

 
阅读更多

$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们。

$modal仅有一个方法open(options),可以使用的选项如下:

templateUrl模态窗口的地址

template用于显示html标签

scope一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope

controller$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入

resolve定义一个成员并将他传递给$modal指定的控制器,相当于routes的一个reslove属性,如果需要传递一个objec对象,需要使用angular.copy()

backdrop控制背景,允许的值:true(默认),false(无背景),“static” 背景是存在的,但点击模态窗口之外时,模态窗口不关闭

keyboard当按下Esc时,模态对话框是否关闭,默认为ture

windowClass指定一个class并被添加到模态窗口中

open方法返回一个模态实例,该实例有如下属性

close(result):关闭模态窗口并传递一个结果

dismiss(reason):撤销模态方法并传递一个原因

result:一个契约,当模态窗口被关闭或撤销时传递

opened:一个契约,当模态窗口打开并且加载完内容时传递的变量

另外,$modalInstance扩展了两个方法$close(result)$dismiss(reason),这些方法很容易关闭窗口并且不需要额外的控制器

分享到:
评论

相关推荐

    angularjs模态化对话框

    AngularJS提供了一种优雅的方式来实现这种功能,通过使用模态服务,如`$uibModal`(来自AngularUI Bootstrap库)或者自定义指令。以下是对这个主题的详细探讨: 首先,`$uibModal`是AngularUI Bootstrap库中的一个...

    echarts 盒形图使用的dataTool工具

    app.controller('boxplotController', function ($scope, $http, $uibModal) { var angular = require('angular'); $scope.init = function () { $scope.open2 = function () { $scope.popup2.opened = true; ...

    alert和confirm和ng-repeat

    在AngularJS中,我们可以利用`$uibModal`服务(来自于`ui-bootstrap`库,这是Angular对Bootstrap组件的封装)来实现`alert`和`confirm`的功能。`$uibModal`服务可以创建一个独立于当前视图的新窗口,这个窗口可以...

    AngulaJS模态化对话框

    UI Bootstrap提供了一个名为`$uibModal`的服务,它允许开发者方便地在应用中打开、配置和管理模态窗口。 描述"AngularJS模态化对话框,根据对话框执行不同的函数方法,比较实用"意味着我们可以为每个模态对话框指定...

    Confirmation-Dialogue-Box-in-Angular.js

    在Angular.js中,我们可以利用内置的服务如`$uibModal`(来自AngularUI Bootstrap库)或者自定义服务来创建模态对话框。`$uibModal`服务提供了一种方便的方式来打开一个模态窗口,并可以自定义其内容、行为和样式。 ...

    Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() ...

    angular-aside:关闭画布侧面菜单以与ui-bootstrap一起使用

    扩展ui-bootstrap的$uibModal提供程序。 :person_tipping_hand: 请对ui-bootstrap版本0.13及更低版本使用v1.2.x。 安装 凉亭: $ bower install angular-aside 然后,在HTML中包含css / js。 NPM $ npm ...

    Angularjs(增删改+分页+弹框+Sql数据库)

    通过`$uibModal`服务,可以打开一个新的模态窗口,并在其中执行增删改操作,确保用户体验流畅。 4. **SQL数据库集成**:在后台,项目可能使用了如MySQL、SQLite等SQL数据库存储数据。AngularJS本身并不处理服务器...

    angular-ui-bootstrap

    2. **服务支持**:除了组件,该库还提供了一些与 Bootstrap 功能对应的服务,如 `$uibModal` 用于创建模态对话框,`$tooltip` 和 `$popover` 用于创建提示和弹出框。 3. **无需 jQuery**:尽管 Bootstrap 原生依赖 ...

    angular-confirm-click:用于使用模态对话框进行点击确认的 AngularJS 指令

    3. **模态服务**:为了显示模态对话框,通常会使用一个专门的服务(如`$uibModal`,来自AngularUI Bootstrap库)。这个服务负责创建、显示和关闭模态对话框。 4. **模板和样式**:模态对话框的HTML内容和样式需要...

    businessCard:创建此应用是为了学习AngularJS的基本功能

    在这个名片应用中,可能使用了依赖注入来获取如$http服务,用于向服务器发送请求,或者$uibModal服务,用于弹出添加名片的对话框。 4. **模块化**:AngularJS应用通常由多个模块组成,每个模块负责特定的功能。在这...

    Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

    在Angular开发中,有时我们需要在Angular的环境之外(如JavaScript的全局作用域或者第三方库...在实际项目中,可以考虑使用Angular的`$rootScope`广播或`$uibModal`等机制来实现组件间的通信,而不是直接操作`$scope`。

    AngularJS 打开新的标签页实现代码

    3. **用户体验**:考虑使用`$uibModal`服务(来自AngularJS的UI Bootstrap库)或者`ngDialog`等库以提供更优雅的模态对话框或新窗口体验。 4. **路由管理**:如果项目使用AngularJS的路由系统,可以直接利用路由跳转...

    cw-modal:AngularJS 模态对话框

    cw-modal 可能会利用 AngularJS 的 $uibModal 服务(来自 AngularUI Bootstrap)或者自定义的服务来管理对话框的生命周期。 3. **数据绑定(Data Binding)**:AngularJS 的双向数据绑定使得在视图和模型之间传递...

Global site tag (gtag.js) - Google Analytics