Question

我有几组关于10个拨动开关。我想为每个组添加一个主切换，切换组中的所有其他切换。如果用户手动关闭组中的任何一个切换，我也希望主切换自动关闭。我很难在不创建反馈循环的情况下完成此任务。从机切换必须听主机，所有主机都会跟随主机，但主机也必须听每个从机切换。如果所有从属切换都打开，则主机应该打开。如果关闭任何从属切换，则主控关闭。这是一些几乎可以工作的代码：

angular.module('ctApp')
.service('toggleAllService', function ()
{
    function MasterToggle(masterNgModel, $element)
    {
        var _slaves = [];

        masterNgModel.$viewChangeListeners.push(function ()
        {
            if ($element.is(':focus'))
            {
                _slaves.forEach(function(slaveNgModel)
                {
                    slaveNgModel.$modelValue = masterNgModel.$modelValue;
                    slaveNgModel.$render();
                });
            }
        });

        return {
            addSlave: function(slaveNgModel, $element)
            {
                _slaves.push(slaveNgModel);

                slaveNgModel.$viewChangeListeners.push(function ()
                {
                    if ($element.is(':focus'))
                    {
                        var toggleMaster = _slaves.reduce(function (prevVal, slaveNgModel)
                        {
                            return !!prevVal && slaveNgModel.$modelValue;
                        }, true);

                        masterNgModel.$setViewValue(toggleMaster);
                        masterNgModel.$render();
                    }
                });
            }
        };
    }

    var _masters = {};

    return {
        addMaster: function (instanceName, ngModel, $element)
        {
            _masters[instanceName] = new MasterToggle(ngModel, $element);
        },
        addSlave: function (instanceName, ngModel, $element)
        {
            if (_masters[instanceName]) _masters[instanceName].addSlave(ngModel, $element);
        }
    };
})
.directive('toggleAllMaster', function (toggleAllService)
{
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModel)
        {
            toggleAllService.addMaster($attrs.toggleAllMaster, ngModel, $element);
        }
    };
})
.directive('toggleAllSlave', function (toggleAllService)
{
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModel)
        {
            toggleAllService.addSlave($attrs.toggleAllSlave, ngModel, $element);
        }
    };
});

这非常有用，除了页面加载。从属切换不会切换主控器，除非其中一个具有焦点（即用户启动了更改）。我还需要他们在页面加载时更改主页。我怎样才能以优雅的方式完成这个混乱？

编辑：这是一个小提琴：http://jsfiddle.net/au3je9x3/

Angular'Master'切换开关

0 个答案: