$scope.$apply 在父级上阻止编译递归时无法更新子指令的视图

Question

我需要一些关于我正在试用的应用程序的帮助。我正在尝试修改此处找到的应用程序 https://github.com/mfauveau/angular-query-builder 以满足特定需求。

子指令独立作用域未正确填充视图/子指令作用域由于父指令递归而混合。我需要帮助来解决范围混合问题。

我正在研究的 plunkr 在这里 https://plnkr.co/edit/rqyHoCL5LHrgLHGjrTcQ?p=info

有问题的指令是，当 "condition" 字段的类型为 "Education" 并且 "find" 按钮可见时，该指令在视图中可见。

queryBuilder.directive('categorySelector', function ($http){
return {
    restrict:'E',
    scope:{
        rule: '='
    },
    templateUrl: '/educationCategories.html',
    controller:['$scope', function ($scope){
        $scope.CategoryArray = [];
        $scope.populateCategories = function(){


            //async call here
            //sorry don't have an example $http call
            //but in my application
            //after the $http call the $scope.CategoryArray gets assigned 
            // the result but even $scope.$apply() doesnt update the view
            //


            //I guess the scope is acting weird according to the below line test
            $scope.CategoryArray.push({name: $scope.$id});
        };

    }]
}
});

当我们添加组级别并开始从内向外添加条件时，此指令会以某种方式起作用。我无法调试到底是什么导致了它。如果问题仍然不清楚，请告诉我。

Answer 1

我想我发现了你的问题。问题不在于 angular 的作用域，而在于您显示模式的方式。因为您使用 id 来切换模态，所以它的值对于添加的所有其他模态都是相同的。当您单击查找按钮时，您将始终显示第一个模态框。

我选择了范围的 id 来区分模态，但您可以选择其他最适合您的方式

<script type="text/ng-template" id="/educationCategories.html">
        <button class="btn" type="button" style="margin-left:5px" data-ng-click="populateCategories()" data-toggle="modal" data-target="#mymodal-{{$id}}">find</button>
                <div class="modal fade" id="mymodal-{{$id}}" tabindex="-1" role="dialog" aria-labelledby="fieldSelectorModalTitle">
                    <div class="modal-dialog modal-dialog-centered" role="document">

可在此处找到修复的有效插件：https://plnkr.co/edit/tiRP759iy4pfyOqEDcDZ?p=preview

$scope.$apply 在父级上阻止编译递归时无法更新子指令的视图

$scope.$apply cannot update view for child directive when compile recursion prevented on parent

angularjs

angularjs-directive

angularjs-digest