Angular1 TreeView：当选中子复选框时更新父复选框值

Question

我有一个实现为http://embed.plnkr.co/Kcka1bmUxhiDAd04Tli3/preview

的树状视图

在单击子项时，应使用背景色更新“树视图父项”复选框。如果选中了子级，则父级复选框的背景色将为蓝色。它会是蓝色的，并检查它或其父对象是否已选中。但是我无法更新父项的检查值。

有人可以帮我吗？

我的树形视图指令代码是：

    app.directive('treeView', ['$compile', function ($compile) {
        return {
            restrict: 'E',
            scope: {
                localNodes: '=model',
                localClick: '&click',
                parentNodeId: '=',
                value: '=',
                getChildrenNodes: '&'
            },
            link: function (scope, tElement, tAttrs, transclude) {
                console.log("parent node ids at directive", scope.parentNodeId);
                var maxLevels = (angular.isUndefined(tAttrs.maxlevels)) ? 10 : tAttrs.maxlevels;
                var hasCheckBox = (angular.isUndefined(tAttrs.checkbox)) ? false : true;
                scope.showItems = [];

                scope.showHide = function (n, ulId, $event) {
                    var hideThis = document.getElementById(ulId);
                    var showHide = angular.element(hideThis).attr('class');
                    angular.element(hideThis).attr('class', (showHide === 'hide' ? 'show' : 'hide'));
                    //angular.element(this).attr('class', (this.attr('class' === 'fa-plus-square' ? 'fa-minus' : 'fa-plus-square')));

                    if ('children' in n == false) {
                        scope.getChildrenNodes({ nodeId: n.Code })
                    }

                    if ($event.target.className == "fa fa-plus-square") {
                        $event.target.className = "fa fa-minus";

                    } else {
                        $event.target.className = "fa fa-plus-square"
                    }



                }


                scope.showIcon = function (node) {
                    //if (!angular.isUndefined(node.children))
                        return true;
                }

                scope.checkIfChildren = function (node) {
                    if (!angular.isUndefined(node.children)) return true;
                }

                /////////////////////////////////////////////////
                /// SELECT ALL CHILDRENS
                function parentCheckChange(item) {
                    for (var i in item.children) {
                        item.children[i].hasChecked = item.hasChecked;
                        if (item.children[i].children) {
                            parentCheckChange(item.children[i]);
                        }
                    }
                }

scope.checkChange = function (localNodes,node, thisID) {
                debugger;
                if (node.children) {
                    parentCheckChange(node);
                }
                //Commented by saravana- will be used
                //scope.childItemCheckCount = 0;
                //scope.childItemUnChecked = 0;
                //console.log("checkcount", scope.childItemCheckCount);
                scope.checkState(localNodes, node, thisID)





                //if (scope.childItemCheckCount == node.children.length) {
                //  node.hasChecked = true;
                //}

                //if (scope.childItemCheckCount > 0 && scope.childItemUnChecked > 0) {
                //  scope.node.hasChecked = false;
                //}

            }

            scope.checkState = function (localNodes,node, thisID) 

                scope.updateCheckedValue = function (localNodes, node, thisID) {
                        for (var i = 0; i < localNodes.length; i++) {
                            if (node.Code !== localNodes[i].Code) {
                                localNodes[i].checkedDisabled = true;
                            }
                            if (localNodes[i].children) {
                                debugger;
                                scope.updateCheckedValue(localNodes[i].children, node, thisID);
                            }

                        }


                }
                scope.updateCheckedValue(localNodes, node, thisID);

            }

                /////////////////////////////////////////////////

                function renderTreeView(collection, level, max) {
                    var text = '';
                    text += '<li ng-repeat="n in ' + collection + '" >';
                    text += '<span ng-show=showIcon(n) class="show-hide" data-ng-click=showHide(n,n.Code,$event);><i class="fa fa-plus-square"></i></span>';
                    text += '<span ng-show=!showIcon(n) style="padding-right: 13px"></span>';

                    if (hasCheckBox) {
                        text += '<div class="checkbox checkbox-info"><input class="tree-checkbox" type=checkbox ng-model=n.hasChecked ng-change="checkChange(n);"><label>{{n.Name}}</label></div>';
                    }

                    if (level < max) {
                        text += '<ul id="{{n.Code}}" class="show" ng-if=checkIfChildren(n)>' + renderTreeView('n.children', level + 1, max) + '</ul></li>';
                    } else {
                        text += '</li>';
                    }

                    return text;
                }// end renderTreeView();

                try {
                    var text = '<ul class="tree-view-wrapper">';
                    text += renderTreeView('localNodes', 1, maxLevels);
                    text += '</ul>';
                    tElement.html(text);
                    $compile(tElement.contents())(scope);
                }
                catch (err) {
                    tElement.html('<b>ERROR!!!</b> - ' + err);
                    $compile(tElement.contents())(scope);
                }
            }
        };

    }]);