angularjs-directive 相关问题

Angular 指令修改范围，但在 setTimeout 之后不修改

//javascript var a = angular.module('minimalReproApp', [ ]） a.controller('MainCtrl', function($scope) { $范围.fileData = {} $scope.fileData.xmlData = "ControllerScope"; }).

如何使用 Angular JS 双击按钮执行操作

使用这个我正在检查右键单击我的按钮如何检查双击我的按钮 ` app.directive('rightClick', function ($parse, $mdMenu) { 返回函数（范围、元素...

具有多个输入的角度结构指令在首次加载组件期间没有任何价值

我创建了一个采用多个值的结构化指令。我遇到的问题是我添加的第二个参数没有在 accessControllRole @Input 中考虑。但是...

如何用以前的值填充下拉列表？

我们有一个下拉列表，其中有 3 个值，现在删除了其中一个值，因此现在留下两个值供用户选择。但是，如果用户在下拉列表中搜索具有该值的项目

如何在角度11中的navigateByUrl()中传递和使用额外内容？

我正在使用navigateByUrl方法传递数据，并希望在目标组件ngOnInit（）内访问它。 this._router.navigateByUrl(${baseUrl}?${previousFilter}, { state: {from:'details-page'} ...

平滑折叠/展开的角度动画 *ngIf 内容可变高度

我想创建一个 Angular 动画，当从 DOM 添加/删除容器的内容时，该动画可以平滑地展开/折叠容器。 （如果内容永远不会离开，这是一个简单的 CSS 修复...

如何使用角度 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 用于加载搜索组件，而不是用于登录