angularjs-directive 相关问题

如何使用角度 17 的事件发射器传递数据？

我在 Angular 中有两个组件，一个父组件，一个子组件，我需要使用 @Output 和事件发射器将数据从子组件传递到父组件，但我需要在父模板中使用 ...

防止 Flexbox 中的 div 通过附加内容改变宽度

嗨，我有这个网页，其中有一个在 Flexbox 中构建的 Angular.js 指令元素列表。 指令元素看起来像这样： 您好，我有这个网页，其中有一个在 Flexbox 中构建的 angular.js 指令元素列表。 指令元素看起来像这样： <div class="variable-input-container" style="width: 100%;"> <div class="var-input" tabindex="0"> <span class="var-input-span" contenteditable="true"></span> </div> <button type="button" class="var-input-btn">[x]</button> </div> 他们有这样的风格： .variable-input-container { display: flex; flex-direction: row; position: relative; } .var-input { flex-grow: 1; white-space: nowrap; overflow: auto; font-size: 14px; height: 34px; border: 1px solid #cfcfcf; } .var-input-span { padding: 6px 12px; padding-left: 14px; width: 100%; display: inline-block; outline: none; overflow: auto; } 现在我的问题是，每当这个指令在没有固定宽度的上下文中使用时，比如弹性盒，就可以向 span 元素添加很多内容，这样它就会变得越来越大（对于 Flexbox 结构，它会围绕 Flexbox 中的所有其他元素移动。）。 不幸的是，我不能只设置固定宽度，因为我需要指令响应各种结构和窗口大小。还有其他方法可以解决这个问题吗？ 尝试改变这样的风格， .variable-input-container { display: flex; flex-direction: row; position: relative; } .var-input { flex-grow: 1; white-space: nowrap; overflow: auto; font-size: 14px; height: 34px; border: 1px solid #cfcfcf; } .var-input-span { padding: 6px 12px; padding-left: 14px; width: 100%; max-width: 300px; /* Set a reasonable max-width */ display: inline-block; outline: none; overflow: auto; }

如何创建一个好的删除方法来使用 Angular 从表中删除一条记录？

我试图创建一个通过 id 删除员工的方法，所以我创建了多个逻辑，除了这个方法之外，所有这些逻辑都在 VS 代码中给了我一个错误。 它在控制台上给我一个错误...

内部函数的数组长度不同

我制定了一个自定义指令。现在，我从chips-break 属性传递字符串数据，并从link 方法将其转换为数组。它有效，但是当我得到 ng-keydown 内的数组长度时......

ng-include 不起作用

我使用 AngularJs 创建了一个简单的页面。当我尝试在index.html 中包含header.htm 时，浏览器中没有显示任何内容。 索引.html <p>我使用 AngularJs 创建了一个简单的页面。当我尝试在 index.html 中包含 header.htm 时，浏览器中没有显示任何内容。</p> <p><strong>index.html</strong> </p> <pre><code>&lt;html&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js&#34;&gt; &lt;/script&gt; &lt;body&gt; &lt;div ng-app=&#34;&#34;&gt; &lt;div ng-include=&#34;&#39;views/header.htm&#39;&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>标题.htm</p> <pre><code>&lt;h1&gt;Header&lt;/h1&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>您还没有显示您的文件夹结构以及<pre><code>header.html</code></pre>的定义。从下次开始尝试创建<a href="https://stackoverflow.com/help/mcve">MCVE</a>。</p> <p>我创建了一个<a href="http://jsfiddle.net/MfHa6/1860/" rel="nofollow noreferrer"><strong>小提琴</strong></a>来展示它是如何工作的。</p> <pre><code>&lt;div ng-controller=&#34;Ctrl&#34;&gt; &lt;div ng-include =&#34;&#39;header.html&#39;&#34; onload=&#39;myFunction()&#39;&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- header.html --&gt; &lt;script type=&#34;text/ng-template&#34; id=&#34;header.html&#34;&gt; Content of Header html &lt;/script&gt; function Ctrl($scope) { $scope.myFunction = function() { alert(&#39;header loaded&#39;); } } </code></pre> </answer> <answer tick="false" vote="0"> <p>您请求<pre><code>views/header.htm</code></pre>，因此您的文件结构需要如下所示：</p> <pre><code>- index.html - views - header.htm </code></pre> <p>要在本地测试您的站点，请使用<a href="https://www.npmjs.com/package/http-server" rel="nofollow noreferrer">http-server</a>之类的工具。或者，当您使用基于 Mac 或 Unix 的计算机时，您只需在项目目录中运行 <pre><code>python -m SimpleHTTPServer</code></pre>。</p> </answer> </body></html>

“SubConstructor”可分配给类型“B”的约束，但“B”可以使用约束“BaseConstructor”的不同子类型进行实例化

我是泛型新手，我做了一个设计，使用泛型来提高代码灵活性。但就我而言，我遇到了一个奇怪的问题，出现上述错误。我的要求是我想要...

使用 angularjs 将图像粘贴到文本角度

我想将剪贴板中的图像和屏幕截图添加到文本角度编辑器中。 像这样

为什么登录后无法导航到仪表板页面

id：任意； 登录提交（id：任意）{ console.log("按钮有效"); const che = \[\]; this.admincreation.getdatas(id).subscribe((che: any) =\> { { const adminl = che.find((b: 任意) =\> { 重新...

我想在两个互不相关的组件之间共享数据

这是我的文件夹结构 顶部导航 侧边导航 屏幕具有顶部和侧面导航选择器，我想将标题从侧面导航传递到顶部导航

如何在 Angular 12 的 Summernote 编辑器中的当前光标位置插入文本

说明： 我的 Angular 12 项目中有一个 Summernote 编辑器 (https://www.npmjs.com/package/ngx-summernote)，并且在编辑器外部还有一个按钮。当用户单击此按钮时，我...

Angularjs：打开日历的焦点和月份选择器功能？

如何将打开焦点功能（类似于 Microsoft Windows 7 日历）添加到我的日历中，如我们使用 Angular Material 版本 1.0.1 的演示中所示，请帮助我解决方案。 谢谢广告...

如何在自定义指令 Angular 中传递条件变量？

我正在尝试在自定义指令中传递变量。但是加载后这会变得错误或未定义。请帮助我找到问题并指导我哪里错了。 定制指令 导入 { 指令，

为什么我的事件处理程序总是落后一次击键，$timeout 如何解决这个问题？

我完全困惑为什么我的按键事件处理程序总是落后一次击键。 http://plnkr.co/edit/w3FAXGd5zjrktO6DgOpD?p=preview ... 我完全困惑为什么我的按键事件处理程序总是落后一次击键。 http://plnkr.co/edit/w3FAXGd5zjrktO6DgOpD?p=preview <body ng-controller="myController"> <form> <input ng-keypress="handleKeypress($event)" /> </form> </body> 控制器： myapp.controller('myController', function($scope, $timeout){ $scope.handleKeypress = function(ev){ console.log(ev.target.value); //always one keystroke behind //$timeout(function(){console.log(ev.target.value);}); //works! }; }); 为什么 $timeout 是必要的以及它为什么/如何工作？ （最好是对新手友好的答案） 我知道在按键事件中角色尚未插入到 DOM 中，但我很困惑，因为 angularjs.org 上的 Hello World 示例在释放按键之前响应。他们的示例没有使用自定义事件处理程序，但显然 Angular 正在 keyup 事件之前更新模型，因此我想了解有关在自定义事件处理程序中执行此操作的更多信息。 idursun 的回答指出 event.which 可在按键上使用，我认为 Angular 可能正在使用 String.fromCharCode()，但我在 Angular 源代码中没有看到任何与此效果相关的内容。 您应该使用ng-keyup。按键可能并不总是按预期工作。 来自 jQuery 文档： 注意： 由于按键事件未包含在任何官方规范中，因此使用时遇到的实际行为可能会因浏览器、浏览器版本和平台的不同而有所不同。 因为示例中的事件目标是一个输入元素，并且该元素尚未处理击键，所以该元素的 value 始终是一个击键滞后。这使事件处理程序有机会拒绝按键。 您可以通过查看事件对象的 which 字段来检查按下的键值。 tl:dr - event.target.value + event.key 将为您提供最新值。 之所以落后一步，是因为它允许您通过在注册事件之前触发事件来拒绝按键。这不是一个错误，而是一个功能。 但是如果您想获得最新的值，这里有一个解决方法：- html:- <input type="text" (keypress)="myFunction($event)"> JS：- myFunction(event) { event.preventDefault() console.log('latest input field value => ', event.target.value + event.key) } 更新：- 添加 event.preventDefault() 以避免出现双字符。 更新2：- 事件按以下顺序调用：- 按键 按键 更新视图 按键 更新视图 按键 因此，如果您可以将此事件更改为 keyup 那么您将获得最新的值，而不必在方法中进行额外的更改。 它可能会对最新角度的人有所帮助。 我使用（输入）而不是按键，它适用于每个字符的按下。

matTooltip 无法在任何路由组件中工作

工具提示适用于未使用 loadChildren 加载的登录组件，但不适用于搜索组件。唯一的区别是 loadChildren 用于加载搜索组件，而不是用于登录

如何检查文本内容的显示：无样式

我想获取 DOM 节点的文本内容，但没有有效隐藏的元素（具有样式显示：无）。 我了解 DOM textContent 属性和 jQuery 的 text() 方法（我...

使用指令以驼峰命名法设置元素的属性值

我正在尝试从这样的指令向 angularJs 元素添加属性： element.attr('startOffset', val); 但是当我检查元素时，添加的属性是“startoffset”，其中“...

如何使用 Angular 2 将我的 json 数据导出为 pdf、excel

我已经从 Angular 2 网站创建了我的数据表。现在我想使用 Angular 2 框架将 json 数据导出到 PDF、Excel。 请给我建议如何实现该目标或任何链接，如果......

ng提交不起作用

我有一个 Angular 4 表单，我正在尝试提交数据 HTML 代码 我有一个 Angular 4 表单，我正在尝试提交数据 HTML 代码 <form class="form-horizontal" [formGroup]="signupForm" (ngSubmit)="onFormSubmit()" > <fieldset> <legend>Scheduler</legend> <!--- Gender Block --> <div class="form-group"> <label for="scheduleJob">Schedule Job</label> <input type="text" formControlName = "schedulejob" id="scheduleJob" placeholder="Schedule Job"> 按钮代码 <div class="form-group"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> Scheduler.TS 文件 import { Component, OnInit } from '@angular/core'; import { Scheduler } from 'rxjs/Scheduler'; /* Import FormControl first */ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-scheduler', templateUrl: './scheduler.component.html', styleUrls: ['./scheduler.component.css'] }) export class SchedulerComponent implements OnInit { //Gender list for the select control element private scheduleTypeList: string[]; //Property for the user private scheduler:Scheduler; private signupForm: FormGroup; constructor(private fb:FormBuilder) { } ngOnInit() { this.scheduleTypeList = ['Type 1', 'Type 2', 'Type 3']; this.signupForm = this.fb.group({ schedulejob: ['', Validators.required] , frequency: ['', Validators.required], days: ['', Validators.required], zone: ['', Validators.required], schedulerjobtype:['', Validators.required] }) } public onFormSubmit() { this.scheduler = this.signupForm.value; if(this.signupForm.valid) { this.scheduler = this.signupForm.value; console.log(this.scheduler); // alert(this.scheduler); /* Any API call logic via services goes here */ } //alert(this.scheduler); console.log(this.scheduler); } } 为什么在提交点击和警报时执行没有传递到 onFormSubmit 或 console.log 不打印值？ 就像我在评论中所说，如果您的按钮不在表单内，它将不会提交。 所以改为： <form> ... <button type="submit">Submit</button> </form> 但是，如果您做得有点不同，则可以将其放在外面，如本问题中所述。 我遇到了同样的问题，因为我没有使用 <form> 标签来包装我的表单。 您可以做的一个小技巧是在表单内放置一个辅助隐藏按钮，并让主按钮以编程方式单击辅助按钮： <form [formGroup]="form" (ngSubmit)="submit()"> ... <button type="submit" hidden #btn></button> </form> ... <button (click)="btn.click()">Submit</button> 您需要将按钮代码放入表单中，如下所示 <form class="form-horizontal" [formGroup]="signupForm" (ngSubmit)="onFormSubmit()" > <fieldset> <legend>Scheduler</legend> <!--- Gender Block --> <div class="form-group"> <label for="scheduleJob">Schedule Job</label> <input type="text" formControlName = "schedulejob" id="scheduleJob" placeholder="Schedule Job"> <!-- Button Code Here --> <div class="form-group"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> <!-- Form ends here --> </form> 您还可以在提交按钮中使用表单属性。该属性使用表单的 id 来引用它： <form id="formID"> ... <button type="submit" form="formID">Submit</button> </form> 我遇到了同样的问题。经过一番努力后，我意识到我在按钮的单击方法中调用了 event.stopProgogation() 和 event.preventDefault() 。当用户单击按钮时，这些方法调用会阻止表单提交。我的问题的解决方案只是删除这些方法调用。 当这件事发生在我身上时，我确实检查了所有可能的方法。最后我发现解决方案是我没有在 app.module 文件中包含 FormsModule 。

将窗口 MutationObserver 与 Angular HostBinding 结合使用时，选项卡崩溃

在我的应用程序中添加 MutationObserver 时遇到了一个非常奇怪的错误。 我的 Angular 组件之一正在使用 HostBinding 到元素的 attr.style 属性，这工作正常......

如何在没有 Host Wrapper 标签的情况下动态加载组件

我正在使用 ViewContainerRef 类的“createComponent()”方法在 Drop Event 期间加载组件模板。一切正常，但它使用 Host Wrapper（选择器）标签加载组件。 b...