如何：AngularJS - 從子控制器訪問父控制器中的方法

Question

我在 UI 中有一個帶有選項卡的 AngularJs 頁面。 每個選項卡加載不同的數據。 其中之一是用戶的任務列表。 用戶可以在這個選項卡上搜索各種任務，當他們找到一個任務時，他們可以點擊它，它會在另一個選項卡上顯示該任務的編輯表單。

我不知道如何顯示其他選項卡，因為選項卡選擇駐留在父控制器（主頁）中，並且選項卡都有自己的子控制器。

父控制器：

"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) ，並讓它打開任務添加/編輯選項卡並加載該數據。 理論上，這樣做的方法是在設置父作用域的變量后調用主、父、控制器，並觸發doTabRouting()方法。 我可以設置doTabRouting()使用的變量，但我實際上無法觸發該方法。

我嘗試通過 $scope 訪問它，但是當我進入 vm.openTaskAddEdit() 時，我收到了“$scope 未定義”的可怕錯誤。

Answer 1

您需要為他們設置父控制器和子控制器以訪問 $scope 對象。

<div ng-controller="UserTasksCtrl">


    <!-- 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>
    
    
    <div ng-controller="JobsCtrl">

        <!-- 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>  
    
    </div>
</div>

Answer 2

事實證明，訪問 $parent 中嵌套的 $parent 是我需要的關鍵。 在子控制器中，我將 $scope 作為參數傳入 init()（例如 init($scope)，然后我將 vm.variable 設置為等於該參數（在本例中為“scope”），如下所示： vm.rootScope = scope.$parent.$parent.vm; . 這讓我可以完全訪問父控制器中聲明的所有內容，包括函數，並允許我更改選項卡。