为什么在 Angular 指令的链接函数中“this”为空?

2024-04-14

我正在尝试使用 TypeScript 和 Angular 编写动态模板,但由于某种原因,“this”关键字始终为空,因此我无法访问我的私有成员 $compile。有任何想法吗?非常感谢! :-)

指示:

namespace ROD.Features.Player {
    "use strict";

    export class VideoDirective implements ng.IDirective {
        public restrict: string = "E";
        public replace: boolean = true;
        public scope = {
            content: "="
        };

        constructor(private $compile: ng.ICompileService) {
        }

        public link(element: JQuery, scope: ng.IScope): any {
            const youtubeTemplate = "<p>Youtube</p>";
            const vimeoTemplate = "<p>Vimeo</p>";

            var linkFn = this.$compile(youtubeTemplate);
            const content: any = linkFn(scope);
            element.append(content);
        }
    }
}

App.ts:

namespace ROD {
    "use strict";
    angular.module("rodApp", [])
        .service("Settings", [() => new Settings.DevelopmentSettings()])
        .service("RedditService", [
            "$http", "Settings",
            ($http: ng.IHttpService, settings: Settings.ISettings) => new Services.Reddit.RedditService($http, settings.sourceUrl),
        ])
        .directive("videoItem", ["$compile",
            ($compile: ng.ICompileService) => new Features.Player.VideoDirective($compile)])
        .controller("PlayerController", [
            "$scope", "RedditService",
            ($scope: any, redditService: Services.Reddit.IRedditService) => new Features.Player.PlayerController($scope, redditService),
        ]);
}

看来我对链接函数使用了错误的语法。这是正确的实现:

        public link = (element: JQuery, scope: ng.IScope): any => {
            const youtubeTemplate = "<p>Youtube</p>";
            const vimeoTemplate = "<p>Vimeo</p>";

            var linkFn = this.$compile(youtubeTemplate);
            const content: any = linkFn(scope);
            element.append(content);
        }

谁能解释这是为什么吗? :-)

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

为什么在 Angular 指令的链接函数中“this”为空? 的相关文章

  • 第一次使用node.js - “ReferenceError:节点未定义”

    我刚刚安装了node js 我尝试编写应该检查版本的node v 但它不起作用 这是输出 gt node v ReferenceError node is not defined at repl 1 2 at REPLServer self
  • Javascript - 在加载所有图像后执行

    看了别人的问题我想 window onload 会回答我的问题 我已经尝试过这个 但它会在页面加载时立即执行代码 而不是在图像加载之后 如果有什么区别的话 图像来自 CDN 并且不是相对的 有人知道解决办法吗 我没有使用 jQuery 想要
  • 如何防止 gulp-notify 破坏 Windows 中的 gulp-watch?

    我正在使用吞咽通知 https www npmjs org package gulp notify插入 这是我如何在 gulpfile js 中实现它的示例 您可以看到我也在使用 gutil 和 livereload 我不知道它们是否发挥任
  • 在鼠标光标位置添加 cytoscape 节点

    我想在画布上的单击事件上的鼠标箭头位置添加一个 cytoscape 节点 我怎样才能做到这一点 我的方法 效果不太好 我可以通过单击创建一个节点 但无法确保创建的节点的位置位于我单击的位置 使用这样的东西 cy click function
  • 如何导入和导出 javascript ES6 类

    我是 javascript 和 nodejs 的新手 我正在使用这个项目来发展我的技能并学习新技术 目前我的项目使用多个相互依赖的类 类文件位于不同的目录中 我当前正在尝试使用 export 和 require 语句来允许在其他文件中引用类
  • Web 组件 - 服务/非 html 组件

    所以我来自 Angular 想看看如何创建vanilla Web components 现在 从 Angular 开始 我们倾向于将事物分开 组件 充当 HTML CSS 和一些 javascript 然后是 服务 主要负责收集数据和执行不
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 确定元素是在页面折叠上方还是下方

    我有一些页面有多个输入框 用户可以在其中输入文本 在单击 下一步 按钮之前 需要填写其中一些内容 我弹出验证错误供用户查看 但是如果问题不在页面上 我希望页面滚动到它 而不是他们必须搜索丢失 错误的字段 我有一个滚动到位 但我无法确定要滚动
  • 如何以编程方式退出或关闭 Javascript UWP 应用程序? (Windows 10)

    我制作了一个游戏 它需要自己的退出按钮 我无法使用CoreApplication Exit https msdn microsoft com en us library windows apps windows applicationmod
  • 使用文件 API 将资源加载到 Three.js 中

    我想创建导入 3D 模型以在浏览器中查看的功能 方法是使用File API http www html5rocks com en tutorials file dndfiles Three js 加载器在我托管的文件上运行良好 我的理解是加
  • 使用 JavaScript 生成 PDF 文件

    我正在尝试将 XML 数据从网页转换为 PDF 文件 并且希望能够完全在 JavaScript 中完成此操作 我需要能够绘制文本 图像和简单的形状 我希望能够完全在浏览器中完成此操作 我刚刚写了一个名为jsPDF https github
  • jQM / jquery-collagePlus 使用问题

    我正在使用 jQM 构建应用程序 并且尝试使用 jquery collagePlus http ed lea github io jquery collagePlus http ed lea github io jquery collage
  • console.log() 显示同一对象属性的矛盾值

    我想我可能要疯了 我使用 console log 来查看对象的状态 然后在下一行对同一对象的特定属性执行 console log 并为每个属性获取不同的值 我正在使用的代码是 console log this pictures Items
  • 在管道中重用变量的功能方式

    在 javascript 和 typescript 中与 Ramda 一起使用函数式编程 我经常发现自己编写如下代码 const myFun c gt const myId c id const value pipe getAnotherO
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • 如何在 ASP.NET MVC 3 的 Razor 视图中编码嵌入的 javascript?

    如何在以下上下文中正确编码 JavaScript 我的 JSON 对象中的值是由应用程序管理员设置的 因此我假设它们需要正确编码 对于 HTML 和 JavaScript 都是如此 我在用着System Web Script Seriali
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • 使用 AngularJS 多部分表单数据将文件上传到 Google Cloud Storage

    我正在尝试使用 AngularJS 中指定的多部分方法将图像文件上传到 Google Cloud Storagehttps cloud google com storage docs json api v1 how tos upload m
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

随机推荐

  • 企业库4数据配置标签

    我正在使用企业库来访问数据 当我运行应用程序时 在 CreateDatabase 语句中我收到此异常 Microsoft Practices ObjectBuilder2 BuildFailedException 未被用户代码处理 Mess
  • 在 Android 中从一个 Activity 移动到另一个 Activity

    我想从一项活动转移到另一项活动 使用虚拟设备 当我单击按钮移动时 我的模拟器会显示一个对话框unfortunately SMS1 has stopped working SMS1 是我的应用程序名称 有人可以帮助我纠正我的代码吗 MainA
  • & 符号使我无法使用 jQuery 加载 XML

    我在 XML 文档中显示描述 然后使用 jQuery 将其加载到应用程序中 当我尝试使用 时 它会破坏代码的加载 我也尝试过 38 它也不起作用 是否有解决方法可以让我在 XML 中包含 符号 编辑 结构是
  • ResultSet.getTimestamp("日期") 与 ResultSet.getTimestamp("日期", Calendar.getInstance(tz))

    java util Date java util Timetamp似乎给许多人带来了极大的困惑 StackOverflow 中有很多问题 不幸的是我的问题有点扭曲 有 2 个 JDBC api 他们应该如何表现 RDBMS 之间是否存在一致
  • 如何保存单选按钮状态

    我正在开发Android应用程序 其中我打开自己的自定义对话框 当我选择单选按钮时 我使用单选按钮 毫无疑问它被选中并工作 但是当我再次打开对话框时 所有单选按钮都被取消选择 我想保存上一个按钮的状态 enter code here pri
  • Android AlertDialog 标题字体

    我正在尝试更改字体android support v7 app AlertDialog标题文本 方法一 TextView title TextView dialog findViewById android R id title retur
  • Redux 应用程序中每个减速器调用上深度复制状态有哪些缺点?

    进行深度复制是否有任何副作用state每次调用reducer函数时 在Redux应用程序中的appReducer上 我这么问是因为不可变的更新模式 https redux js org recipes structuring reducer
  • 区分鼠标和键盘触发onclick

    我需要找到一种方法来确定链接是否已通过鼠标单击或按键激活 a href Save a 这个想法是 如果他们使用鼠标点击链接 那么他们可以继续使用鼠标来选择下一步要做什么 但是 如果他们在页面上切换并切换到 保存 链接 那么我将打开下一行进行
  • 用于分类的 Python 向量化[重复]

    这个问题在这里已经有答案了 我目前正在尝试构建一个包含大约 80 个类别的文本分类模型 文档分类 当我使用随机森林构建和训练模型时 将文本矢量化为 TF IDF 矩阵后 该模型运行良好 然而 当我引入新数据时 我用来构建 RF 的相同单词不
  • 将 R 数据框中的多列转换为日期格式

    我有一个很大的数据文件 其中所有日期都已作为字符加载 我想将所有日期列更改为日期格式 大多数日期具有 y m d 格式 有些具有 Y m d 格式 有 25 列日期 因此单独更改每一列的效率很低 我可以 df DATE1 lt as Dat
  • Firebase:如何将虚 URL 添加到云函数?

    被简短提及here https stackoverflow com questions 45850375 use custom domain for google cloud function 但现在我已经将我的 GCP 项目连接到 Fir
  • 如何在“X”秒后调用 jquery 函数

    我有一个 jquery 函数 我需要在 Iframe 中打开网站后调用它 我正在尝试在 Iframe 中打开一个网络链接 打开它后我需要调用以下函数 那么我该怎么做呢 这是我的功能
  • xcode 4.5 崩溃日志符号除应用程序行外

    我怎样才能象征一切 这是一个例子 所以我正在谈论 Thread 0 name Dispatch queue com apple main thread Thread 0 Crashed 0 CoreFoundation 0x351642cc
  • 如何在标签中的 tkinter 上制作字幕?

    我有这个源代码 from Tkinter import import tkMessageBox import time class Window Tk def init self parent Tk init self parent sel
  • 将图像文件存储在 IndexedDB 中

    我在尝试将图像文件存储在 IndexedDB 中时遇到问题 我抓取文件对象并尝试将其推送到 IndexedDB 中 但它似乎抛出错误 DOM Exception DATA CLONE ERR 25 如何将如下所示的文件对象转换为可以存储在
  • 如何在Eclipse中添加JBoss服务器?

    我是 JBoss 的新手 刚刚安装了 Eclipse 我已将一个项目添加到工作区 现在我想将其部署到 Jboss 服务器 然而 在新的服务器运行环境列表中 JBoss 不可用 我正在使用以下 Eclipse 版本 面向 Web 开发人员的
  • 从 UIViewController 返回 NSString

    我想返回一个NSString 从一个名为InputUIViewController的UIViewController 到之前的一个名为CallerUIViewController的UIViewController 它启动了InputUIVi
  • F# 图表示例

    我想使用内置功能或免费库在 F 中做一些基本的图表 我会对一个非常基本的例子感到非常非常满意 如果可能的话 饼图 示例数据 John 34 Sara 30 Will 20 Maria 16 其中整数是饼图中要表示的百分比 我最近安装了 VS
  • 使用 D3 在地图上绘制点

    我正在尝试使用基于纬度和经度的 D3 地理库在地图上绘制一些点 但是 当我将这些值传递到投影函数时 它会导致坐标超出 SVG 图像的范围 我的代码基于文档中提供了这个示例 http bl ocks org mbostock 3757119
  • 为什么在 Angular 指令的链接函数中“this”为空?

    我正在尝试使用 TypeScript 和 Angular 编写动态模板 但由于某种原因 this 关键字始终为空 因此我无法访问我的私有成员 compile 有任何想法吗 非常感谢 指示 namespace ROD Features Pla