Question

我使用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。这适用于第一个选择，但后续选择不起作用，因为先前选择的子项未取消选择，因为model.active = false更改未传播到子组件（因为父项的model.active值仍然false - 但有些孩子model.active等于true。这无疑是一个范围/约束问题;我觉得我需要强行推动model.active = false给所有孩子任何想法？

Answer 1

怎么样：

<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();
       };
    }
});

更新Angular子1.5组件无法正常工作

1 个答案: