Question

我正在组合一个角度指令，该指令提供带有复选框的嵌套树视图。

当用户选中复选框时，我希望指令自动检查所有子复选框。取消选中时反之亦然。看起来模型得到了更新（我做了一些$ logging），但视图没有反映任何复选框的变化，除了用户点击的复选框。

如果我添加$ scope。$适用于我的听众，我收到一条错误，指出$ apply已在进行中。

任何想法我做错了什么？

数据层次结构如下所示（coffeeScript）：

[
        {
            name: "Top1"
            nodes: [
                {
                    name: "Sub1"
                    nodes: [
                        {
                            name: "SubSub1"
                        }
                    ]
                }
            ]
        }
        {
            name: "Top2"
        }
    ]

指令如下（coffeeScript）：

myApp.directive 'ccCheckboxTreeview', () ->
    {
        restrict: 'E',
        require: '^ngModel'
        scope: {
            ngModel: '='
        }
        templateUrl: '/app/templates/directives/checkboxTreeViewTemplate.html'
        controller: ($scope, $log) -> 
            $scope.nodeCheckClicked = (node) ->
                if node.checked
                    uncheckChildren(node)
                else
                    checkChildren(node)

            loopAndSet = (node, trueOrFalse) ->
                $log.info node.name, trueOrFalse if node?

                if node.nodes? && node.nodes.length > 0
                    for n in node.nodes 
                        loopAndSet n, trueOrFalse

                node.checked = trueOrFalse if node?
                return

            uncheckChildren = (node) ->
                loopAndSet node, false
                return

            checkChildren = (node) ->
                loopAndSet node, true
                return
    }

模板如下：

<script type="text/ng-template" id="tree_item_renderer.html">
    <label><input type="checkbox" ng-model="data.checked" ng-click="nodeCheckClicked(data)" />{{data.name}}</label>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul data="{{ngModel}}">
    <li ng-repeat="data in ngModel" ng-include="'tree_item_renderer.html'"></li>
</ul>

修改它现在完美地工作，我不知道为什么。 Plunker：http://plnkr.co/M7ICpYgolEIa0FTJQSvU

Answer 1

指令超出了摘要周期的范围。换句话说，在进行更改以在DOM中更新后，您应该只需要调用范围。$ apply（）。

Answer 2

我将不得不关闭这个问题。我的问题中的代码现在工作正常，没有任何更改。范围。$申请也不需要。我不知道为什么它以前没有用。

为什么这个angularJS指令的变化不会反映在视图上？

2 个答案: