angularjs-directive 相关问题

当父作用域为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...

如何为“ng-disabled”添加多个条件？

在启用按钮之前，我需要检查两个条件是否都为真： 这是一个例子： 在启用按钮之前，我需要检查两个条件是否都都为真： 这是一个例子： <button type="submit" ng-disabled="frmUser.pw2.$error.pwMatch" class="btn btn-primary" ng-click="ChangePassword()">Change</button> 此示例仅包含 ng-disabled 中的一个条件。 我如何添加另一个变量，例如范围变量？ 您应该能够 && 条件： ng-disabled="condition1 && condition2" 旺尼是对的。 && 运算符在 HTML 中不起作用。对于 Angular，您必须在多种情况下使用双管道 (||)。 原始问题的措辞中可能存在一些问题： 在启用按钮之前我需要检查两个条件是否都为真 首先要记住，ng-disabled 指令正在评估按钮应该“禁用”的条件，但最初的问题是指按钮应该“启用”的条件。 在 ng-disabled 表达式不“真实”的任何情况下都会启用它。 所以，首先考虑的是如何重新表述问题的逻辑，使其更接近ng-disabled的逻辑要求。 检查两个条件是否为真以启用按钮的逻辑相反是，如果“任一”条件为“假”，则应禁用该按钮。 因此，在原始问题的情况下，ng-disabled 的伪表达式是“如果条件1为假或条件2为假，则禁用按钮”。 翻译成 Angular 所需的类似 Javascript 的代码片段 (https://docs.angularjs.org/guide/expression)，我们得到： ！条件1 || !条件2 Zoomlar 说得对！ 确保以正确的优先级包装条件 ng-disabled="((!product.img) || (!product.name))" 实际上 ng-disabled 指令对我来说适用于“ || ”逻辑运算符。 “&&”仅评估一个条件。 示例： https://jsbin.com/venifacimu/1/edit?html,js,输出<button type="submit" ng-disabled="!testForm.$valid || !items.length">Button with || operator</button> 您可能需要单击“使用 JS 运行” - 希望这会有所帮助。 你可以尝试这样的事情。 <button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true"> </button> 对我来说效果很好。 两个变量必须为 false 才能禁用按钮： <button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true"> </button> 这个方法对我有用 ng-disabled = =“（用户.角色.ID！= 1）&&（用户.角色.ID！= 2）”

同一指令的 Angular 多个实例，范围不隔离，范围相同

我在页面上多次使用该指令，例如 $scope.stylusright[0] = 330; var appendHtml = $compile(' 我在页面上多次使用该指令，例如 $scope.stylusright[0] = 330; var appendHtml = $compile('<directive-history rightstylus="{{stylusright[0]}}"></directive-history>')($scope); $element.append(appendHtml); $scope.stylusright[1] = 660; var appendHtml = $compile('<directive-history rightstylus="{{stylusright[1]}}"></directive-history>')($scope); $element.append(appendHtml); 我的指令看起来像 angular.module('mymodule').directive('directiveHistory', function ($compile) { return { restrict: 'E', scope: true, transclude: true, templateUrl: 'directive.history.html', scope: { rightstylus: "@", }, ... 我的问题是，当同一指令多次添加到同一页面时，它们的范围变得相同。当我在第二个指令中更改 $scope.stylusright[1] 时，它也会对所有其他指令进行更改。 您的指令代码看起来没有错误（只是您有重复的作用域键）。 看看这个 Plunker，它与您想要使用隔离范围指令执行的操作类似。 希望有帮助。

剑道网格虚拟滚动最后一行丢失

我正在开发剑道网络应用程序。我有一个剑道网格，并且启用了虚拟滚动。滚动网格时缺少最后一行，但我可以通过过滤看到该记录。在 IE 中它正在工作

如何将指令restrict='A'附加到现有元素

在使用 ng-repeat 渲染后，需要将仅限于“A”（属性）的自定义指令附加到其他指令的某些实例（例如第二个实例）。 需要将一个仅限于“A”（属性）的自定义指令附加到其他指令的某些实例（例如第二个指令）在使用 ng-repeat 渲染后。 <some-directive ng-repeat="item in vm.items"></some-directive> “A”指令源自 uib-popover，但我认为纯 uib-popover 的解决方案也适用。另外，如果稍后能够安全地删除附加的弹出窗口，那就太好了。 有什么建议如何实施吗？ 你可以这样做:: 创建优先级高于ng-repeat优先级....的自定义指令 ng-repeat 具有 1000 优先级。 angular.module('x').directive('customDir', function() { return { priority: 1001, // as ng-repeat has priority level 1000 restrict: 'A', compile: function () { return function () {...} } } }) 用途:: <some-directive ng-repeat="item in vm.items" custom-dir ></some-directive>

ui-select 仅过滤一个字段

我正在开发一个 AngularJS 应用程序，我正在使用 ui-select 来允许用户选择多个角色和选项卡。过滤对于选项卡来说完美无缺，但由于某种原因，它对选项卡不起作用...

有没有办法以角度方式将一个 ng 模板传递到另一个 ng 模板？

我遇到了无法以角度传递嵌套 ng-container 的问题。 这不是确切的问题，但总的来说是我遇到的问题。 父组件.ts @成分（{ 选择...