问题标签 [angular-components]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1479 浏览

angularjs - 如何在 Angular 1.5 中的兄弟指令/组件之间进行通信

在 Angular 1.5 兄弟组件和/或指令之间进行通信的最佳方式是什么。我正在使用角材料。我正在使用ui路由器。

我试图让我的组件和指令分开,而不是相互依赖。

我想在适当的情况下将我的指令重构为 .component() 模块。

我有一个导航栏,我已将其分成一个指令(导航栏)。在那个导航栏中,我有一个搜索栏,我想过滤一个列表。该列表位于同级指令中。

最初,我在 ui-router 定义的 MainCtrl 范围之外有 navbar 指令(并试图将其用作 .compontent())。这对我来说似乎很有意义,因为导航栏在整个应用程序中都相对一致。

我推迟将它放在 MainCtrl 的范围内,然后我可以将 MainCtrl 中的属性绑定到我的 navBar 指令中的元素。这似乎是错误的,因为现在 navBar 和 fileBrowser 与 MainCtrl 相结合。

我正在研究的其他选项:

使用和 scope.$watch() 从子组件 navBar 定义父组件的属性。然后在另一个子组件 fileBrowser 中,使用 scope.$watch() 来监视父组件中的这些变化并做出相应的响应。

使用服务来存储数据和传递数据。

使用 $emit, $broadcast 事件。

在这种情况下,将我的指令/组件分开的最佳解决方案是什么?在兄弟指令/组件之间进行通信的最佳/最干净/推荐的方式是什么?

此状态由 ui-router 发起

main.component.js

main.html

我希望导航栏过滤位于兄弟指令或组件文件浏览器中的列表

导航栏.directive.js

导航栏.html

这是我要过滤的列表所在的位置。

文件浏览器.js

文件浏览器.html

0 投票
1 回答
2368 浏览

angularjs - 无法绑定到 Angular 1.5 组件中的 rootscope

我正在按照本指南消除遗留 Angular 1.5 应用程序的“范围汤”架构:http: //teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components。 html#replace-external-reference-with-bound-input

我正在尝试删除对 的引用$rootscope.taskui,因此我尝试向组件添加绑定。不幸的是,taskui现在是未定义的。“组件”是一个 Angular 1.5 组件(它只是一个普通的指令)。难道我做错了什么?

如果将“this.taskui”替换为“$rootscope.taskui”(正确注入),method则可以很好地打印 taskui 对象。

这是控制器代码:

0 投票
1 回答
154 浏览

angularjs - 如何通过外部服务将数据更改为 Angular 1.5 组件?

我用 Angular 1.5 组件制作了一个应用程序。我通过参数向组件提供数据resolve,这样我可以在同一个组件中显示来自不同来源的任何数据。但我不明白,如何更改组件中的一些数据。

例如,我有一个用户服务,它通过 API 与用户一起工作。在我的状态下,我加载一个组件并使用方法 Users.get()。我使用 UI 路由器。

我在这个组件中有一个表单并且想要更改数据。我想在提交表单时调用 Users.update() 方法。但是该组件对用户服务一无所知,这是正确的。

我如何指定该组件必须使用 Users.update() 来更新此状态下的数据?提交表单时如何在组件中调用此方法?

0 投票
2 回答
3151 浏览

angularjs - 检测子组件中对 ng-model 的更改并在 AngularJS 中传递数据

我正在创建一个基于大型组件的 Angular 1.5.8 应用程序。一个父组件中大约有 18 个不同的组件。为此,每个组件模板都有作为父组件表单一部分的输入。到目前为止一切正常。我坚持并且真正需要逻辑的是如何检测对每个组件中的输入所做的更改,以便可以将数据保存在共享服务中供父组件在将表单数据发送到服务器之前获取.

从父组件

PharmacyInfo 只是一个简单的输入

药房组件

我遇到的问题是我不能在每个组件上都有一个“更新”按钮,让用户每次在表单中输入值时都可以点击。它不会太用户友好。

我遇到的另一个问题是使用 $onChanges。它没有检测到对子组件中的表单所做的任何更改。不知道如何做到这一点。不过,我仍在阅读文档。

但是,如果我使用 $doCheck,它确实会检测到更改,但每次我对表单进行任何更改时它都会运行。现在,大约有 18 个组件和每个组件中的许多输入表单,我认为这只会减慢应用程序的速度。

我的选择是什么?我怎样才能使它无缝,以便当用户输入值时,该值要么保存在共享服务中,要么保存在父组件对象中(以更好者为准)。然后我需要将数据发送到要插入的数据库。

0 投票
1 回答
114 浏览

javascript - 在路由组件中绑定“&”方法

考虑这个简化的 Angular 1.5.x 组件(全部在jsfiddle中):

Html(在正文中)

单击组件按钮时,计数变量正在更新('&' onUpdate 绑定良好)。

现在我想有一个从 ui.router 到组件的路由:

导航到状态,结果Cannot read property '2' of null,删除 onUpdate 成员修复错误但破坏绑定。

我究竟做错了什么?使用ui.router路由到组件时,绑定组件回调方法的方法是什么。

jsfiddle

0 投票
2 回答
1987 浏览

angularjs - AngularJs 1.5 ES6:控制器中未定义的绑定

传递给组件的绑定在 html 中工作,但在控制器中未定义。

hero.component.js

HeroController.js

英雄.html

我正在使用角度版本1.5.0

0 投票
1 回答
145 浏览

javascript - Angular 1.5 递归嵌套组件

我正在寻找使用 Angular 1.5 组件构建类似扩展折叠的东西。这个想法是你可以连续拥有一个或多个,或者你可以嵌套它们来创建一棵树。因此,有效的 html 可能如下所示:

或者

所以,我的问题是我是否可以使用Angular 1.5 组件(不是指令)以使 2 级展开折叠可以知道它的父展开折叠的方式来做到这一点。通常,当您嵌套这样的组件时,我认为您会拥有以下内容:

但是 A) 在这种情况下不需要嵌套,并且 B) parentCtrl 最终成为对当前 $ctrl 的永无止境的递归引用。

这是可以用组件完成的吗?还是因为某种原因被明确禁止?

0 投票
2 回答
37544 浏览

javascript - 如何重新加载当前的 Angular 2 组件

如何在 Angular 2 中重新加载相同的组件?

下面是我的代码:

nextproduct()绑定到模板中的点击事件。

uidproduct是一个具有许多属性的 JSON 对象,我正在更新 DOM{{uidproduct.classname}}

我在这样的模板中使用它:

当我单击<button (click)="nextproduct()">它时,它将更改 DOM 中的类属性,但我需要重新加载组件以使外部脚本生效。

0 投票
1 回答
694 浏览

javascript - 使用 Angular 1.5 组件绑定字符串时出错

我正在尝试通过 Angular 1.5 组件的 html 绑定字符串。我收到一条错误消息,上面写着:

这是我调用组件的 html:

索引.html

和组件:

和组件html:

0 投票
1 回答
570 浏览

javascript - 将数组绑定到 Angular 1.5 组件的父级

我在子组件上实现双向绑定时遇到问题。所以我的目标是当一个数组添加/删除一个新对象时,父组件上的数组也会反映这种变化。这是一些更详细的代码。

父组件控制器:

父组件html:

子组件:

子控制器:

这是我得到的错误。我很确定这与绑定有关,但我不确定出了什么问题。任何建议将不胜感激!