更新Angular child 1.5组件不工作
更新Angular child 1.5组件不工作
提问于 2017-07-16 08:00:17
我正在使用一个Angular 1.5组件来构建以下结构：
<parent>
<child active="model.active">
<child active="model.active">
<child active="model.active">
</parent>我的组件：
(function() {
'use strict'
angular.module('module').component('child',
{
templateUrl: 'template.html',
bindings: {
active: '<'
},
controllerAs: 'model',
controller: function() {
var model = this;
model.select = function() {
model.deselectAllChildren()(model);
model.active = true;
};
}
});
})();父deselectAllChildren方法：
model.deselectAllChildren = function(tabModel) {
model.active = false;
};当用户选择其中一个子组件时，我希望它处于活动状态，而其他子组件处于非活动状态。因此，该逻辑使所有子项都处于非活动状态(以清除先前的选择)，然后使选定的子项处于活动状态。默认情况下，父级的model.active属性为false。这对于第一个select很有效，但是后续的select不起作用，因为之前选择的子组件不会取消选择，因为model.active = false更改不会传播到子组件(因为父组件的model.active值仍然是false -但是一些子组件的model.active等于true。这无疑是一个作用域/绑定问题；我觉得我需要强制将model.active = false下推到所有子级。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2017-07-16 21:27:04
这样如何：
<parent>
<child active="model.active === 0" on-select="model.active=0">
<child active="model.active === 1" on-select="model.active=1">
<child active="model.active === 2" on-select="model.active=2">
</parent>angular.module('module').component('child',
{
templateUrl: 'template.html',
bindings: {
active: '<',
onSelect: '&'
},
controllerAs: 'model',
controller: function() {
var model = this;
model.select = function() {
model.onSelect();
};
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45126347
复制
相似问题
Angular - Child组件不呈现来自http请求的数据更新
Angular 1.5嵌套组件
Angular 1.5组件绑定，但控制器不工作
$routerCanActivate不工作(Angular 1.5组件路由器，又名ngComponentRouter)
Angular 1.5父子组件问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
