ECMAScript6 AngularJS 过滤器

2024-02-13

我在项目中使用 ECMAScript6 并尝试创建角度过滤器。以下是我的尝试,但是我在控制台中收到以下错误: 无法设置未定义的属性“PassFilter”

我对 ES6 和 Angular 都是新手。由于遗留的限制,我不得不以这种方式引导角度。

myAngularModule = angular.module("MyModule");

angular.element(document).ready(function() {
  var myDiv = $("#myAngularDiv");
  angular.bootstrap(myDiv, ["MyModule"]);
});

myAngularModule.filter('PassFilter', APP.filters.PassFilter);



/* Filter is in a separate file: */
class PassFilter {

  constructor(input) {

    var split = input.split('');
    var result = "";
    for (var i = 0; i < split.length; i++) {
      result += "*";
    }
    return result;

  }
}

APP.filters.PassFilter = PassFilter;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div id="myAngularDiv">
  <input type="password" ng-model="password">
  <span>{{password | PassFilter}}</span>
</div>

我是 Angular 的新手。我使用类在 Angular 中创建过滤器。

class PassFilter{
  constructor(input){
    this.input = input;
  }

  myMethod() {
    let input = this.input;

    let split = input.split('');
    let result = "";
    for (let i = 0; i < split.length; i++) {
      result += "*";
    }

    return result;
  }

  static PassFilterFactory(input){
    let filter = new PassFilter(input);
    return filter.myMethod();
  }
}

PassFilter.PassFilterFactory.$inject = ['input'];

angular.module('myAngularModule', [])
  .filter('passFilter', () => PassFilter.PassFilterFactory);

in html

<span>{{password | passFilter}}</span>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ECMAScript6 AngularJS 过滤器 的相关文章

  • 为什么 IE9+ 上的网络浏览器不支持 document.createEvent 以及如何修复它?

    我使用的是 Windows 8 Internet Explorer 10 Visual Studio 2013 这是 JavaScript 代码 function simulate element eventName var options
  • 无法将消息发布到服务工作人员,因为控制器值为空

    我正在尝试做一个website https secure depths 31934 herokuapp com 在 Service Worker 的帮助下可以离线使用 以缓存页面所需的文件 我试图让用户控制他希望缓存的图像 为此 我使用一个
  • 为什么我的事件处理程序会导致“不是函数”错误,但可以在 Firebug 控制台中运行?

    使用JQuery 1 2 6 在Firefox 3和IE7上进行测试 我有一些非常基本的 JavaScript 代码来重新加载验证码图像 在我的 JS 文件中 我有 var Captcha count 0 Refresh function
  • 为什么 Jshint 在此 if 语句中说“变量已定义”?

    我有这个代码 if something is true var someVar true else var someVar false JsHint 表示在 else 语句部分 someVar 已被定义 这是为什么 我该如何解决 Thank
  • 获取 CRM 2011 中功能区按钮的 ID

    我创建了一个 JavaScript 我想在其中隐藏功能区Reactivate Lead按钮取决于某些条件 我通过在表单上按 F12 获得了按钮的 ID 即lead NoRelationship Form Mscrm Form lead Re
  • 角度 $location.path 不起作用

    我有一个类似的问题this one https stackoverflow com questions 11784656 angularjs location not changing the path 但不同 在这里我试图添加一个事件侦听
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • 多次训练brain.js?

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN
  • html 图像 src 调用 javaScript 变量

    这是我的代码 我想问 我怎样才能做到这一点 img src img apple 我一直在尝试使用 call 函数和 document onload 但它根本不起作用 有人可以救我吗 我假设你只是想用 javascript 更新图像 src
  • 如何用 JavaScript 修复图像透视变形和旋转?

    我有一些用手机拍摄的图像 有没有可以拉直纸张照片并将其压平的 JavaScript 库 例如 我想创建一个矩形图像 该图像没有任何失真 换句话说我想知道如何用 JavaScript 修复透视变形和旋转 例如 我发现下面的示例图像来自this
  • vuejs 模板和 asp.net 部分视图,好的做法吗?

    我在网站中使用 Vue js 并将模板添加到 html 代码中 并将 js 代码添加到单个 js 文件中 所以我不想使用 vue Vuefy Browserfy 方法 而是稍后捆绑并缩小我的 js 文件 由于我必须使用 Asp Net MV
  • 如何将本地文本文件上传到文本区域(网页内)

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一
  • IE localStorage 事件失火

    在 Internet Explorer 9 和 10 中 localStorage 实现意外地触发事件 这里有很棒的线索 Chrome 的 localStorage 实现存在错误 https stackoverflow com questi
  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能
  • 如何在打字稿中使用外部js

    我通过 Typescript 代码生成 Angular JS 代码 在一种情况下 我需要将外部 JS 文件添加到我的打字稿文件中 并且需要访问 js 文件中的类 我像这样添加js文件
  • ES6 静态方法引用 self? [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository
  • 如何使用 Javascript 在 html 文件中搜索字符串?

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本
  • 如何使用 Javascript OAuth 库不暴露您的密钥?

    看着Twitter OAuth 库 https dev twitter com docs twitter libraries 我看到了这个注释 将 JavaScript 与 OAuth 结合使用时要小心 不要暴露你的钥匙 然后 看着jsOA
  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简
  • Safari 扩展将消息发送到特定选项卡

    有没有办法从全局页面发送消息到特定选项卡 我目前正在做的是 在创建选项卡时 注入的脚本会创建一个唯一的 ID 并将包含该编号的消息发送到全局页面 并且全局页面会保存该编号 如果全局页面需要发送一些数据到一个tab 即 tab 3 然后全局页

随机推荐

  • 对小文本进行有效搜索

    我有许多小文本 假设大约 500 个单词 和两个数据库 每个数据库大约有 10 000 个条目 关键字 我现在想要处理每个文本并找出文本中包含哪些关键字 保存在两个数据库中的关键字 你们中有人有关于如何有效地做到这一点的好方法吗 我想在搜索
  • 使用正则表达式的缺点

    最近 我的经理建议我不要过度依赖正则表达式 因为它有很多缺点 当我尝试了解更多信息时 我听说它存在诸如正则表达式之类的问题 因为某些对象即使在使用后仍会继续挂在字符串引用上 从而导致内存泄漏 NET RegEx 内存泄漏 调查 https
  • NgRx 和 localStorage 的组合

    我对 NGRX 和状态管理的概念有点陌生 因为我来自后端开发 每当我看到和听到状态管理这个术语时 我脑海中浮现的就是 CQRS 嗯 互联网上的一些文章说它是以此为模式的 我的问题是 在我的角度应用程序中 我可以做类似的事情 从后端获取数据然
  • 减少频繁重新部署(上传)到远程服务器的战争规模

    在开发过程中 我需要经常更新我的 Web 应用程序源代码并将更新后的 war 部署到远程 Tomcat 服务器 在我的连接上上传大型战争 25MB 需要太长时间 大约 30 分钟 效率非常低 有什么办法可以减少战争规模吗 我的项目中有很多外
  • CSS:浮动时忽略div高度

    I m trying to display some pictures All of them have the same width but different height I m trying to do something like
  • 在不同 Perl 版本下运行的程序之间传递对象

    使用从 perl5 6 pl 到 perl5 24 pl 的不同 perl 版本将对象作为输入参数传递时遇到问题 无法从函数 from 5 24 获取返回值 下面提供了有问题的代码 使用windows平台 如何解决这个问题 SharedBe
  • 从 .un~ 文件恢复 vim 文件,无需撤消命令

    如何从 vim 文件恢复undo不点击文件undo 我有一个在添加文本时保存的 vim 文件 然后我运行了一个 python 命令来清空文件的内容 我可以看到文件中包含的一些单词 un 文件 当我尝试在文件中撤消时 它说Already at
  • Java HttpURLConnection 使用 SOCKS 代理而不是 HTTP

    我有一个非常简单的代码 使用 HttpURLConnection 通过代理访问某个网站 System setProperty java net useSystemProxies true System out println Proxy P
  • 如何对项目中的单个文件禁用 ARC?

    我在我的项目中成功使用了 ARC 然而 我遇到了一些文件 例如 在单元测试和模拟对象中 其中 ARC 的规则现在有点脆弱 我记得听说有一种方法可以在每个文件的基础上禁用 ARC 尽管我一直找不到这个选项 这可能吗 如何针对每个文件禁用 AR
  • 下面代码的时间复杂度是多少?

    sum 0 for int i 1 i
  • WPF TextBlock 红色负数

    我试图找出创建样式 触发器以将前景设置为红色 当值 如果您没有使用 MVVM 模型 您可能有 ForegroundColor 属性 那么最简单的方法就是创建一个新的 IValueConverter 将您的背景绑定到您的值 在 MyWindo
  • 使用 Docker Desktop 的 WSL2 上的 Docker 卷

    我刚刚在 Windows 上使用 Docker 尝试 WSL 2 但在安装卷时遇到了问题 version 3 7 services node build container name node hostname node volumes a
  • 如何使用Qt获取wifi信号强度?

    到目前为止 我可以使用 QNetworkConfigurationManager allConfigurations 扫描所有可用的 wifi 但是每个的 QNetworkConfiguration 数据都没有 wifi 信号强度 你能告诉
  • Swift 类/结构隐式符合 NSObjectProtocol?

    不久前我遇到了奇怪的 Swift 问题 当我尝试在调试中将 Swift 对象转换为 NSObjectProtocol 时 它执行成功 但是当这段代码在 AppStore 构建中执行时 它会转换为 nil import Foundation
  • 使用c++禁用任务切换键

    我已经做了很多搜索 但没有真正的解决方案 针对我自己的问题 所以我想我会在这里问 我正在设计一个类似信息亭的程序 防止用户在程序运行时使用任务键 alt tab alt esc ctrl esc 等 请注意 我是一名新手程序员 因此如果可以
  • 数据库DateTime毫秒和纳秒如果为0则默认被截断,而在Java 11中使用ZonedDateTime时使用它

    我正在从 Oracle 数据库中获取日期时间并进行解析Java 11 https en wikipedia org wiki Java version history Java 11使用 ZonedDateTime 如下 甲骨文 gt 1
  • TypeScript TSConfig CompilerOptions ES2017 目标和库

    我正在开发一个 TypeScript 项目 我们使用 ES2017 作为输出目标以及其中一个库 因为它将通过 Babel 并且我们希望支持任何 Env 的最新功能集我们的目标是巴别塔 一切似乎都很顺利 所以我不太担心 然而 我不知道幕后发生
  • C#程序中的System.IO.Compression.FileSystem.dll

    我喜欢使用 dll系统 IO 压缩 文件系统 dll http msdn microsoft com en us library system io compression zipfile aspx在我的项目中 the net framew
  • vuejs 根据数据条件绑定一个类

    有人可以告诉我我做错了什么吗 我试图根据数据模型中是否显示是或否来绑定类 我已经尝试过条件绑定 但我想也许我缺少一个参数或者以错误的方式处理这个问题 我缺少什么 我希望 css 一月类绑定到表 如果 v bind 已经存在 我如何触发 v
  • ECMAScript6 AngularJS 过滤器

    我在项目中使用 ECMAScript6 并尝试创建角度过滤器 以下是我的尝试 但是我在控制台中收到以下错误 无法设置未定义的属性 PassFilter 我对 ES6 和 Angular 都是新手 由于遗留的限制 我不得不以这种方式引导角度