我有一个angularjs页面，在ui中有选项卡。每个选项卡加载不同的数据。其中之一是用户的任务列表。用户可以在此选项卡上搜索各种任务，找到任务后，可以单击该选项卡，它将在另一个选项卡上显示该任务的编辑表单。
我不知道如何显示其他选项卡，因为选项卡选择位于父控制器（主页面）中，并且这些选项卡都有自己的子控制器。
父控制器：

"use strict";

angular
.module("userTasks.controllers", [])

.controller("UserTasksCtrl",
    ["$scope", "$window", "$uibModal", "$filter", "$location", "$routeParams", "api",
    function($scope, $window, $uibModal, $filter, $location, $routeParams, api) {
        var vm = this;
        vm.activeTab = "Tasks";

        vm.loadTaskList = (
            function() {
                vm.pageTaskList = "/Content/UserTasks/taskList.html";
            }
        );

        vm.loadAddEditTask = (
            function() {
                vm.pageAddEditTask = "/Content/UserTasks/tasksAddEdit.html";
            }
        );

        vm.doTabRouting = (
            function() {
                switch (vm.activeTab) {
                    case "Tasks":
                        vm.tabTasks = true;
                        vm.loadTasks();
                        break;
                    case "CreateTask":
                        vm.tabAddEditTask = true;
                        vm.loadAddEditTask();
                        break;
                    default:
                        vm.tabDetails = true;
                        vm.loadDetails();
                        break;
                }
            }
        );
    }
]);

儿童控制器：

"use strict";

angular
.module("userTasks.controllers_Tasks", [])

.controller("TasksCtrl",
    ["$scope", "$routeParams", "$filter", "$uibModal", "$uibModalStack", "taskAPI",
    function ($scope, $routeParams, $filter, $uibModal, $uibModalStack, taskAPI) {
        var vm = this;

        vm.openTaskAddEdit = (
            function(task) {
                vm.root.task= {
                    Id: task.Id
                };

                vm.root.tabTasks        = false;
                vm.root.tabAddEditTask  = true;

                vm.root.activeTab       = "CreateTask";
                vm.root.pageAddEditJob  = "/Content/UserTasks/taskAddEdit.html";
                vm.root.tab             = "CreateTask";
            }
        );
    }
]);

包含以下选项卡的index.html（父页面）：

<!-- Tabs for Nav -->
    <ul class="nav nav-tabs">
        <li class="nav-item" id="headingTasks" ng-class="{ 'active': vm.tabTasks }">
            <a data-target="#tabTasks" data-toggle="tab" class="nav-link pt-1 pr-2 pb-1 pl-2"
               ng-class="{ 'active': vm.tabTasks }"
               ng-click="vm.loadTasks()">Tasks</a>
        </li>
        <li class="nav-item" id="headingAddEditTask" ng-class="{ 'active': vm.tabAddEditTasks }" ng-if="vm.tabAddEditTasks">
            <a data-target="#tabAddEditTasks" data-toggle="tab" class="nav-link pt-1 pr-2 pb-1 pl-2"
               ng-class="{ 'active': vm.tabAddEditTasks }">{{vm.addEditText}} <span ng-if="(vm.addEditUnsaved)" style="font-size: 85%;"><i class="fa fa-fw fa-warning text-warning"></i></span></a>
        </li>
    </ul>

    <!-- Tabs content -->
    <div class="tab-content">
        <!--Tasks-->
        <div id="tabTasks" class="tab-pane fade show tab-pane-bordered" ng-class="{ 'active show': vm.tabTasks}">
            <div class="row p-1 m-0">
                <div class="col-12 p-0 m-0">
                    <div ng-include="vm.pageTasks"></div>
                </div>
            </div>
        </div>

        <!--Add/Edit Task-->
        <div id="tabAddEditTasks" class="tab-pane fade show tab-pane-bordered" ng-class="{ 'active show': vm.tabAddEditTasks }">
            <div class="row p-1 m-0">
                <div class="col-12 p-0 m-0">
                    <div ng-include="vm.pageAddEditTask"></div>
                </div>
            </div>
        </div>
    </div>

我想打个电话 vm.openTaskAddEdit(task) 从任务列表选项卡，打开任务添加/编辑选项卡并加载数据。理论上，这样做的方法是在设置父范围的变量后调用main、parent、controller，并触发 doTabRouting() 方法。我可以设置变量 doTabRouting() 使用，但我无法实际触发该方法。
我尝试通过$scope访问它，但是当我进入vm.opentaskaddedit（）时，我得到了可怕的错误“$scope未定义”。