angularjs-directive 相关问题

角定制指令不要单独响应主机侦听器

I为时间输入创建自定义指令，并且它可以完美地工作，但是如果我在同一页面中使用其中的多个，则每个更改都适用于所有更改。 我该如何使用我的指令，他们会...

根据数据动态选择指令

我正在尝试基于对象数组填充表。该数组不包含相同类型的对象，对于每一行，我想要完全不同的样式，以及 onclick 函数、基本...

Angular 项目从 13 迁移到 19 的“ng-flat-form”问题

我目前使用的是版本 14，我修复了一些错误，并且能够运行该应用程序，但是当我开始迁移到 Angular 15 时，我收到了这些警告和错误 包...

显示页面中正在使用哪些指令

有没有办法显示页面中正在使用哪些指令？ 请看一下这个例子 有些事情... 有没有办法显示页面中正在使用哪些指令？ 请看一下这个例子 <div> some things ... <mydirective></mydirective> <mydirective1></mydirective1> <mydirective2></mydirective2> some things ... </div> 这是“mydirective”html <div> <mychilddirective></mychilddirective> <mychilddirective1></mychilddirective1> <mychilddirective2></mychilddirective2> </div> 问题 1：那么，我的观点是，如何在此页面中显示使用的指令列表（例如在控制台日志或其他地方）？ 这个问题的答案应该是 mydirective, mychilddirective, mychilddirective1, mychilddirective2, mydirective1, mydirective2 问题2：如果问题1有答案，有没有办法使用浏览器控制台“发现”使用的指令？或者我的指令是否需要遵循某种模式？ （比如某些属性或类似的东西......） 每个指令都有链接功能。按顺序调用。您可以使用它们来识别正在使用哪个指令。 以下是有关链接函数及其调用顺序的更多详细信息的链接。 https://www.undefinednull.com/2014/07/07/practical-guide-to-prelink-postlink-and-controller-methods-of-angular-directives/

每次更改指令的范围变量时，自定义角度指令的模板都会重复

我有一个数组绑定到自定义指令的属性。我的模板部分使用了该属性值。每次数组更改时都会运行模板，对吧？该模板创建一个 div

从存储在系统中的AngularJS属性文件中读取

谁能告诉我如何读取 Angularjs 中的属性文件。属性文件可以位于系统中的任何位置。我想要类似的东西，通过指定路径读取java文件。 预先感谢

当父作用域为true或isolated时，无法在子指令中访问父指令的作用域属性

我正在构建一个自定义登录模块指令，其中父标签包含用户名和密码等子标签。我已经在父范围中定义了用户名和密码，并使用控制进行通信...

如何创建一个简单的仪表板角度小部件？

我为我的角度应用程序安装了 malhar-angular-dashboard 模块，我想创建一个简单的小部件来显示一些虚拟文本。 HTML 视图 我为我的角度应用程序安装了 malhar-angular-dashboard 模块，我想创建一个简单的小部件来显示一些虚拟文本。 HTML 视图 <div class="row"> <div class="col-md-12"> <div dashboard="timeDashboardsOptions" class="dashboard-container"></div> </div> </div> JavaScript $scope.timeDashboardsOptions = { widgetDefinitions: [ // list required { name: 'timeWidget', // option required template: '<div>hello {{widget.title}}</div>', settingsModalOptions: { templateUrl: 'views/dashboards/widget-area/time.html' } , onSettingsClose: function(resultFromModal, widgetModel, dashboardScope) { // do something to update widgetModel, like the default implementation: jQuery.extend(true, widget, result); }, onSettingsDismiss: function(reasonForDismissal, dashboardScope) { // probably do nothing here, since the user pressed cancel } } ], defaultWidgets: [ // list required {name:'timeWidget'} ] }; 小部件模板 <div> <h3>Time widget</h3> </div> 当我运行它时，我得到这样的结果： ul li { list-style-type: none; display: inline; } .middle { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .last { background-color: #5bc0de; border-color: #46b8da; } <ul> <li class='first'>timeWidget - missing ???</li> <li> <button class='middle'>Default Widgets</button> </li> <li class='last'> <button class='last'>Clear</button> </li> </ul> 和错误 TypeError：_.merge 不是函数 在 Object.WidgetModel (http://localhost:9000/bower_components/malhar-angular-dashboard/dist/malhar-angular-dashboard.js:848:42) 删除 underscore.js 并让 loadash.js 处理它。

在模块b中使用模块a中的Angular 1.5组件（使用ES2015）

我正在尝试使用 jspm、systemjs 和 Angular 1.5 为应用程序创建新的设置。我有一个或多或少像这样的结构： 源代码 通用（整个应用程序、某些服务、图像等通用的部分）

何时在 angularJS 中使用双大括号 {{}}

摘自 Angular 文档： 角度表达式 角度表达式是类似 JavaScript 的代码片段，主要是 放置在插值绑定中，例如 摘自 Angular 文档： 角度表达式 角度表达式是类似 JavaScript 的代码片段，主要是 放置在插值绑定中，例如 <span title="{{ attrBinding }}">{{ textBinding }}</span> 但也可以直接在指令中使用 属性，例如 ng-click="functionExpression()". 例如，这些是 Angular 中的有效表达式： 1+2 a+b 用户名项目[索引] 但是我对何时使用双括号语法{{}}以及何时不使用有点困惑。文档似乎建议您在指令属性中使用表达式时不需要它们（请参阅上面的 ng-click 示例）。 尽管以下有效的代码提供了相反的轶事证据： <ul id="Menu"> <li ng-repeat="appModule in applicationModules" id="{{appModule.Name}}" ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }" ng-click="menuClicked(appModule.Name)"> <a href="#Content/{{appModule.Name}}">{{appModule.Display}}</a> </li> </ul> 注意在 ng-class 指令中如何使用双大括号，而在 ng-click 指令中则不是。 你如何知道何时使用它们，何时不使用它们？ 这取决于所讨论的指令属性及其使用的绑定类型。此外，这取决于您在特定情况下的意图。 从你的例子来看： ng-repeat="appModule in applicationModules" 不需要大括号，因为该表达式是通过 ng-repeat 指令内的 Angular 求值的。 id="{{appModule.Name}}" 这里我们需要大括号，因为我们希望 id 等于表达式的值。 ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }" 我很确定这可以写成： ng-class="{ 'selected' : selectedAppModule == appModule.Name }" 你也会得到同样的行为。 ng-click="menuClicked(appModule.Name)" 在此示例中，我们需要将 ng-click 绑定到名为 menuClicked 的方法。 通常，当我们想要计算表达式时，我们会使用 {{}}，而在处理属性时，我们并不总是需要使用 {{}}，因为它们在许多情况下是在幕后计算的。 简单提示 当需要 {{}} 时，经验法则是将其视为 .ToString() 方法的包装。将表达式转换为字符串是否有意义，那么使用 {{}} 也有意义。 （非常欢迎任何反例） 检查文档。 避免使用插值法 {{ }} 文档说该指令采用表达式 .对于 ng-src，文档明确指出使用 {{ }}。如果属性不是 AngularJS 指令，请使用插值。 错误 ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }" 上面的例子是混合插值和角度表达的例子。 改为使用： ng-class="{ 'selected' : selectedAppModule == appModule.Name }" 来自文档： 为什么混合插值和表达式是不好的做法： 它增加了标记的复杂性 不能保证它适用于每个指令，因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据，它将获取原始插值标记而不是数据。 它会影响性能，因为插值会在范围内添加另一个观察者。 由于这不是推荐的用法，因此我们不会对此进行测试，并且对 AngularJS 核心的更改可能会破坏您的代码。 — AngularJS 开发人员指南 - 混合插值和表达式 更新 不要使用插值： ng-selected，请参阅 AngularJS ng-selected 指令 API 参考 ng-disabled，请参阅 AngularJS ng-disabled 指令 API 参考 ng-required ng-if ng-show ng-hide ng-open ng-value ng-repeat ng-options

对象文字只能指定已知属性，并且“组件”类型中不存在“管道”

我正在尝试在 Angular 2 中创建自定义管道。当我尝试运行它时，收到一条错误消息： 对象字面量只能指定已知的属性，并且 “组件”类型中不存在“管道” T...

如何使用 ViewChild 获取 Angular 中组件的完整 HTML 和 CSS（计算样式）？

我有一个 Angular 组件，我需要使用 ViewChild 提取完整的 HTML 内容以及计算出的特定元素的 CSS 样式。我目前可以使用以下方式获取 HTML 内容： @

为什么我的 Angular 代码没有显示正确的输出？

我的任务是输入电子邮件地址并检查每个字符，如果该字符是希伯来语 - 将其转换为英语 代码的问题是它无法正确转换，我写...

使用对象而不是 Angular 响应式表单中的值来修补表单控件的问题

我在 Angular 表单中使用 mat-select 来让用户选择多个国家/地区作为具有 id 和 name 属性的对象。但是，我需要用完整的国家/地区对象来修补表单控件...

Angular Material mdTabs：是否可以有垂直选项卡？

我正在寻找从上到下显示的选项卡，选项卡导航位于左侧。无论如何，这可以在 Angular Material 库中实现吗？

如何将默认属性应用于角度组件

我正在尝试将一些字段格式化为整齐的行和列，并且因为我必须将一些其他组件与非常特定的格式相匹配，所以工作的 html 如下所示： 我正在尝试将一些字段格式化为整齐的行和列，并且因为我必须将一些其他组件与非常特定的格式相匹配，所以工作的 html 看起来像这样： <div fxLayout="column" style="margin-right: -30px"> <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px"> <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start"> <some-component-1 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-1> <some-component-2 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-2> </div> </div> </div> 要输入或复制粘贴的内容很多，因此我想将其中一些 fxLayout div 抽象为角度组件，使其看起来像这样： <my-row> <my-column> <some-component-1></some-component-1> </my-column> <my-column> <some-component-2></some-component-2> </my-column> </my-row> 我能够像这样创建 my-row 组件： row.component.html： <div fxLayout="column" style="margin-right: -30px"> <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px"> <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start"> <ng-content></ng-content> </div> </div> </div> 这让我可以这样做： <my-row> <some-component-1 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-1> <some-component-2 fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></some-component-2> </my-row> 不过，我不想为每个嵌套组件包含这些 fxFlex 属性。当我尝试创建 my-column 组件时，默认情况下无法将 fxFlex 字段应用到该组件。 我尝试了以下方法，但没有成功： column.component.html： <ng-container fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" > <ng-content></ng-content> </ng-container> 和 <ng-container> <ng-content fxFlex="45" fxFlex.sm="90" fxFlex.xs ="90" ></ng-content> </ng-container> 有没有办法自动将这些 fxFlex 属性应用到 my-column 组件？ 您可以尝试使用角度指令并向新组件添加指令my-row，它将看到这个新组件并获取其所有子组件并分配您想要的属性： import {Directive, ElementRef} from '@angular/core'; @Directive({ standalone: true, selector: '[myRowDirective]', }) export class MyRowtDirective { constructor(private el: ElementRef) { const row = this.el.nativeElement; const components = select all children of row for component in components{ component.setAttribute("fxFlex", "45") ... } } } 我制作了一个简化的代码，研究了一些关于指令的信息，但这是一个可以提供帮助的基础。

更改自定义指令的属性

我有自定义指令来加载 div 内的页面 .directive('页面', 函数 () { 返回 { templateUrl: 函数 (elem, attr) { return 'pages/page-' + attr.num + '.html';...

带有条件表达式的 AngularJS ng 风格

我正在这样处理我的问题： ng-style =“{宽度：getTheValue（）}” 但为了避免在控制器端使用此功能，我更愿意这样做： ng-style =“{宽度：

使用 @Input() 时出现 TypeScript 错误

我正在尝试使用 Angular 4 开发一个应用程序。但是我在使用时收到了一条错误消息 @Input('inputProducts') 产品：产品[]; 错误是 [tslint] 在课堂上“

Jquery Masonry 与 AngularJS

在我的项目中我尝试实现jquery masonry。但它正在发挥作用。我尝试谷歌搜索但发现了一些帖子。但我尝试了一下它不起作用。 我的指令代码是 shout.directive("shoutList", fu...