首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular material $mdDialog.confirm()/prompt()中访问类的控制器变量?

在Angular Material中,$mdDialog.confirm()和$mdDialog.prompt()是用于显示确认对话框和提示对话框的方法。如果想在这些对话框中访问类的控制器变量,可以通过以下步骤实现:

  1. 在控制器中定义一个变量,例如vm.myVariable
  2. 在打开对话框的代码中,使用locals参数将控制器的作用域传递给对话框:$mdDialog.confirm() .title('Confirmation Dialog') .textContent('Are you sure?') .ariaLabel('Confirmation') .targetEvent(ev) .ok('Yes') .cancel('No') .locals({ myVariable: vm.myVariable }) // 将控制器的变量传递给对话框 .clickOutsideToClose(true) .then(function(answer) { // 处理确认对话框的回调 }, function() { // 处理取消对话框的回调 });
  3. 在对话框的控制器中,通过locals参数获取传递的变量:function DialogController($scope, $mdDialog, myVariable) { $scope.myVariable = myVariable; // 在对话框的控制器中访问传递的变量 $scope.hide = function() { $mdDialog.hide(); }; $scope.cancel = function() { $mdDialog.cancel(); }; $scope.answer = function(answer) { $mdDialog.hide(answer); }; }

通过以上步骤,你可以在Angular Material的对话框中访问类的控制器变量。请注意,这里的示例代码仅供参考,实际使用时需要根据你的具体情况进行调整。

关于Angular Material的更多信息和使用示例,你可以参考腾讯云的Angular Material文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第214天:Angular 基础概念

- 目前有一个全职开发团队继续开发和维护这个库 - 有了这一框架就可以轻松构建 SPA 应用程序 - 轻松构建 SPA(单一页面应用程序) - 单一页面应用程序:   + 只有一个页面(整个应用一个载体...  ``` - 每种方式安装包,本质都是将angular库下载到当前文件夹 6、angular优势 Angular 最大程度减少了页面上 DOM 操作; 让 JavaScript 中专注业务逻辑代码...Angular 官网打不开 我们需要本地运行 Angular 文档 下载最新 Angular 包 解压后有一个 docs 文件夹 必须通过 http 服务器访问该文件夹 可以通过 SublimeServer...= angular.module("MyApp", []); 也可以将重复使用指令或过滤器之类做成模块便于复用 注意必须指定第二个参数,否则变成找到已经定义模块 3、控制器(Controller...比较: 表达式作用类似于ng-bind指令 建议更多使用指令 AngularJS表达式很像JavaScript表达式 它们可以包含文字、运算符和变量 {{ 5 + 5 }} 或 {{ firstName

1.9K30

Angular Material 设计之美

正如官方所说其目的就是构建基于 Angular 和 TypeScript 高质量组件库。 官方列举了如下几点来解释“高质量”含义。 国际化和可访问性,以便所有用户都可以使用。...但是在编写 ng-matero 过程,随着对 Angular Material 深入了解,我发现这种说法稍显狭隘甚至产生了一定误导,所以我希望这篇文章可以让大家对 Angular Material...丰富颜色 Material Design 亮点之一就是拥有非常丰富颜色值,其实 Angular Material 颜色变量比官方定义色值还要多一些。...Angular Material 颜色定义严谨且优雅。以下是红色值变量。...@include angular-material-theme($candy-app-theme); Angular Material 给出了多套主题设置方法,只需要增加样式控制就可以了。

5K30

(4)Angular开发

http://angular-ui.github.io/ 更少代码,实现更强劲功能 ?...image.png HTML 页面 ng-xxx 属性称之为指令 ng-app 指令告诉 AngularJS, 元素是 AngularJS 应用程序管理边界 ng-model 指令把文本框值绑定到变量...Angular 文档 下载最新 Angular 包 MVC 是一种应用程序开发思想 为了解决应用程序展示结构,业务逻辑之间紧耦合关系 模型 处理数据和业务逻辑 视图 向用户展示数据 控制器...组织调度相应处理模型 AngularJS很重要一个特性就是实现模块化编程 var myApp = angular.module("MyApp", []); 控制器 angular.module(...为应用模型设置初始状态 通过$scope对象把数据模型或函数行为暴露给视图 监视模型变化,做出相应动作 // 监视购物车内容变化,计算最新结果 $scope.

3.1K40

编程星球——水·滴20180624期

变量不加def,将变量添加到当前脚本binding,一般看作全局变量。...链接:PrimeNG https://www.primefaces.org/primeng 还有官方Material2: 链接:GitHub - angular/material2: Material...uint, ulong 等等都不可以; 5、关键字名称冲突,xId,yId等,需通过[Key]注解注明; 6、奇葩一个,你新建实体,但是没有build也会造成这个错误。...2018/6/21 #水·滴# C#字段属性区别: 字段一般用在内部使用,属性一般供外部类访问。...按照设计原则,字段都是private,只能在内部使用,如果是public,那么外部类谁都有可能访问,对字段进行破坏性修改,这是我们不希望看到,所以字段一定是private

1.6K30

Ng-Matero V9 正式发布!

extensions 再谈 Angular Material 我在之前文章狠狠吹了一波 Angular Material 设计之美,然而事实是 Angular Material 在设计及实现方面确实非常优秀...,从可访问性、焦点管理、键盘交互、CDK 这些方面来看可以说一骑绝尘。...唯一需要注意是,Material Design 与 Bootstrap 最大不同在于表单交互。Bootstrap 表单元素相对比较独立,任何第三方表单组件都可以直接使用。...扩展组件库 实话说 Angular Material 确实缺少一些比较常用交互组件,在开发 Ng-Matero 过程,顺便开发了一套 Material Extensions 组件库。...这套组件库组件大致有以下三: 完全独立开发组件(e.g. alert) Angular Material 组件二次封装(e.g. data-grid) 第三方组件优化及包装(e.g. color-picker

1.3K20

【17】进大厂必须掌握面试题-50个Angular面试

另一方面,装饰器是用于分离装饰或修改设计模式,而无需实际更改原始源代码。 9.您对Angular控制器了解多少? 控制器是JavaScript函数,可为HTML UI提供数据和逻辑。...在这里,每个视图都有自己 scope,因此由其视图控制器设置变量将对其他控制器隐藏。...JavaScript对象,变量和函数都隐式地成为window对象成员 4.处理HTML文档 4.访问和操纵浏览器窗口 5....Karma Angular Mocks Mocha Browserify Sion 38.如何在Angular创建服务?...AngularSingleton模式是一种很棒模式,它限制了一个不能被多次使用。AngularSingleton模式主要在依赖项注入和服务实现。

41.1K51

【前端技术丨主题周】Angular 核心概念与框架演进

Angular 七大核心概念 1. 模块 在Web 开发,通过依赖全局状态或变量和保证JavaScript 文件引入顺序来正确加载相应库。...另外,需要数据绑定机制来实现把数据映射到模板上,或者从模板(input 控件)取回数据。 4 ....服务和依赖注入 在Angular ,如果说组件是用于处理界面和交互相关,那么服务就是开发者用于书写和放置可重用公共功能(日志处理、权限管理等)和复杂业务逻辑地方。...在Angular ,一个服务就是一个简单。通常在组件引用服务来处理数据和实现逻辑。...在此之上,还有不少其他外部工具库,类似于: Angular Material,Google 官方Material 设计风格UI 组件库。

9K10

AngularJS入门心得4——漫谈指令scope

指令内部可以访问外部指令作用域,并且模板也可以访问外部作用域对象。为了将作用域传递进去,scope参数值必须通过{}或true设置成隔离作用域。...显示到my-dialog.htmldiv标签。同时,{{name}}能够读取到指令外作用域,即控制器scope.name值。   ...这是一个最干净情况,index.html{{name}}值到控制器Controller读取为“Tobias”。 2.    ...即指令直接共享外部控制器scope,此时directivescope就和控制器紧密相关,所以此时,scope.name在指令link中被重新赋值,这时候控制器和指令name都被更新为Jeff...通过这种声明,表明directive有了自己独立scope,但是这种scope会在directive实例化时候将外部控制器变量全部复制到自己scope作用域中。

1.9K60

Hoppscotch:开源 API 开发工具,快捷实用 | 开源日报 No.77

该项目具有以下核心优势: 轻量级:采用简约 UI 设计。 快速:实时发送请求并获得响应。 支持多种 HTTP 方法, GET、POST、PUT 等。...可设置环境变量来初始化预处理脚本。 团队协作方面可以创建无限数量团队成员和集合,在工作区管理个人或者团队集合环境。 针对效率做了键盘快捷键优化设计。 通过启用代理模式解决 CORS 问题。...密钥可以是您想要严格控制访问权限任何内容,例如 API 密钥、密码、证书等。Vault 提供了统一接口来管理这些密钥,并提供紧密访问控制和详细审计日志记录。...@angular/material:为 Angular 应用提供 Material Design 风格 UI 组件。...主要特点: 提供了一套全新、面向未来并富有前瞻性 React 组件 支持渐进式迁移至最新版 (FluentUI V9) 包含对老版本 ( V8) 已经广泛使用过程积累下来较为完善且稳定可靠等功能

31310

AngularDart 4.0 高级-结构指令 顶

microsyntax解析器将该字符串转换为上属性: let关键字声明了模板引用模板输入变量。这个例子输入变量是hero,i和odd。...变量作用域限于重复模板单个实例。 您可以在其他结构指令定义再次使用相同变量名称。 您通过在#(#var)前缀加上变量名称来声明一个模板引用变量。 引用变量是指其附加元素,组件或指令。...它可以在整个模板任何地方访问。 模板输入和引用变量名称都有其自己名称空间。 let herohero变量永远不会和#herohero一样。...该前缀属于Angular。 选择适合您或您公司简短内容。 在这个例子,前缀是my。 指令名称以Directive结尾。 Angular自己指令不会。...您将通过TemplateRef获取内容并通过ViewContainerRef访问视图容器。 你在指令构造函数中注入这两个作为私有变量

16K20

何在 ASP.NET MVC 中集成 AngularJS(1)

所有的客户 Angular 视图和控件器将驻留在客户子文件夹,所有的产品 Angular 视图和控件器将驻留在产品子文件夹 。...不需要使用 Angular 提供 $scope 变量,你只需要简单声明一个 vm 变量并分配“this”给它。所有被分配给 vm 对象变量都会替换掉 $scope。...有了分配给控制器功能示例变量,我们就可以使用这些别名并访问这些变量。 此外,所有示例应用程序控制器都是使用“use strict”JavaScript 命令以一种严格模式运行。...作为一个例子,在一般 JavaScript ,错误输入变量名称会创建一个新全局变量。在严格模式下,这将抛出一个错误,因此无法意外创建一个全局变量。...在下面的例子,提供了一种用于注册和动态加载两个控制器和服务注册方法。如果你愿意,也可以包括 Angular 全部库和指令注册功能。

7.5K60

前端MVC学习总结(二)——AngularJS验证、过滤器、指令

AngularJS指令标记可以是HTML属性、元素名称或者CSS,指令扩展了HTML行为。...这是angular支持基于“视图-模型-控制器”设计模式原则主要方面。 AngularMVC组件有: 模型 — 模型是一个域属性集合;域被附加到DOM上,通过绑定来存取域属性。...视图 — 模板(进行数据绑定HTML)会被呈现到视图中。 控制器 — ngController指令声明一个控制器;该类包含了业务逻辑,在应用后台使用函数和值来操控域中属性。...这对于要求Angular忽略那些元素包含Angular指令和绑定情况下很有用。这种情况能让你网站实时显示源码。...      transclude:是否可以访问内部作用域以外作用域       scope:指定内部作用域       link:链接函数       controller:定义控制器来管理指令作用域和视图

15.3K60

angularjs 指令详解

当设置为字符串时,会以字符串值为名字,来查找注册在应用控制器构造函数. angular.module('myApp', []) .directive('myDirective', function...($scope, $element, $attrs, $transclude) { // 控制器逻辑放在这里 } }); 我们可以将任意可以被注入ng服务注入到控制器,便可以在指令中使用它了。...控制器也有一些特殊服务可以被注入到指令当中。这些服务有: 1. $scope 与指令元素相关联的当前作用域。 2. $element 当前指令对应元素。 3....那么我们知道了指令myUrl变量值是如何来,那么我们要如何在template中使用它呢?...这个很简单,看上面的代码就能很明白了,我们在template代码需要用表达式方式对其引用{{myUrl}},这样我们就能够使用到myUrl变量值了~   1.

2.2K40

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

应用过程痛苦 5、angular 是最适合CRUDSPA 单页面的应用程序 不适合SEO、交互频繁游戏之类交互体验网站 AngularJS核心组件: 1.6、第一个AngularJS程序...上面的做法有一个潜在问题,只有当用户在文档框输入值时候我们才会去计算,还有更多输入框,每一个输入框都要绑定。 $scope....2.7、ng-repeat迭代 ngRepeat指令为集合每项实例化一个模板。每个模板实例拥有自己域,使用循环变量指向当前集合项上,$index指向当前项索引或键值。...如果表达式结果为一个数组,则数组每个元素为使用空格分隔一个或多个名字符串。 如果表达式结果为一个对象,对象每个key-value如果键值为真时则键名作为名。...2、通过$scope对象把数据模型和函数暴露给视图(UI模板) 3、监视模型其余部分变化,并采取相应动作,双向绑定 为了让控制器保持轻量可管理状态,建议在视图每一块功能区域创建一个控制器,MenuController

15.3K100

Angular v18 现已推出!

与此同时,我们还用新 Material 3 主题和文档刷新了 material.angular.io。您可以在我们指南中找到如何在应用程序中使用 Angular Material 3!...在预览期间,我们进一步改进了控制流类型检查,启用了更符合人体工程学隐式变量混叠,并为某些与性能相关反模式设置了护栏。...CDK 和 Material 水合作用支持在 v17 ,一些 Angular Material 和 CDK 组件被选择退出水合,这导致了它们重新渲染。...App Hosting 简化了动态 Angular 应用程序开发和部署,提供内置框架支持、GitHub 集成以及与其他 Firebase 产品( Authentication、Cloud Firestore...窗体现在公开一个名为 属性,该属性允许您订阅此窗体控件事件流。

5110

使用Angular8和百度地图api开发《旅游清单》

我们将收获: Angular8基本用法,架构 使用百度地图API实现自己地图应用 解决调用百度地图API时跨域问题 对localStorage进行基础封装,进行数据持久化 material...根模块提供了用来启动应用引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面 DOM 连接起来。...,可以创建服务。...服务定义通常紧跟在 “@Injectable()” 装饰器之后。该装饰器提供元数据可以让你服务作为依赖被注入到客户组件。...,这里我用来做存储第三方组件位置,定义好之后在app.module.ts引入: // material组件库 import { CustomMaterialModule } from '.

6K30

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

、本身基于TDD完成 4、致力于减轻开发人员在开发AJAX应用过程痛苦 5、angular 是最适合CRUDSPA 单页面的应用程序 不适合SEO、交互频繁游戏之类交互体验网站 ?...2.5、$watch 用于监视对象变化,可以获得变化前值与变化后值。 上面的做法有一个潜在问题,只有当用户在文档框输入值时候我们才会去计算,还有更多输入框,每一个输入框都要绑定。...2.7、ng-repeat迭代 ngRepeat指令为集合每项实例化一个模板。每个模板实例拥有自己域,使用循环变量指向当前集合项上,$index指向当前项索引或键值。...如果表达式结果为一个数组,则数组每个元素为使用空格分隔一个或多个名字符串。 如果表达式结果为一个对象,对象每个key-value如果键值为真时则键名作为名。...,建议在视图每一块功能区域创建一个控制器,MenuController、PathController 可以嵌套控制器,适OO继承特性 示例代码: <!

12.6K30
领券