如何隐藏父控制器中的div并在父控制器中显示子控制器？ -angularjs

Question

我有一个显示title和div的控制器。单击div时，将调用add()函数。现在，因为add()函数被调用，我想要隐藏当前div然后使用ng-show或ng-if，我想用其控制器显示另一个指令。

我想隐藏addCard[index]，然后显示listWrapperControl。 listWrapperControl[$index]位于指令list-wrapper-controls中，如模板中所示。

Controller1及其指令

.controller('listWrapperController', ['$scope','$compile','$http', function($scope, $compile, $http){
    'ngInject';

     $scope.tasks=[];

    function add(index){ // click on this function to hide addCard[] and display the Controller2

    //$scope.listcontrols[index] = true;
    $scope.listWrapperControl[index] = true;
    $scope.addCard[index] = true;
    //cardvalue = vm.newtitle[index];
};

}])

.directive('listWrapper', function() {

    return {
        restrict: 'E', // Element directive
        scope:{
              tasks: '=',
              addCard: '=',
              listWrapperControl: '='
        },  
        controller: 'listWrapperController as listctrl',
        template: 
`<div class ="listwrapper" id="listwrapper" ng-repeat="task in tasks track by $index"><div id="titlebox" >
        <b class ="card1" id ="cardtitle">
        {{task.title}}
        </b></div> 
        <list-wrapper-controls list-wrapper-control ="listctrl.listWrapperControl" ng-show="ctrl.listWrapperControl[$index]" id= "hidecontrols">
        </list-wrapper-controls>
    <div id="transparent" ng-click ="listctrl.add($index)"  style ="padding-left:0%; margin-left:0;">
            <a  add-card = "addCard" ng-hide="addCard[$index]" style ="color:inherit">
            Add a card...
            </a>
    </div></div>`
};
});

Controller2及其指令：

显示此控制器

angular.module('myApp')
.controller('listWrapperControl', ['$scope','$compile','$http', function($scope, $compile, $http){
    'ngInject';
}]) 
.directive('listWrapperControls', function() {
    return {
        restrict: 'E', // Element directive
        controller: 'listWrapperControl as listcontrolctrl',
        template: `<div ng-if="listcontrols[$index]==true" ng-show="listcontrolctrl.listWrapperControl[$index]"><textarea ng-model="listcontrolctrl.newtitle[$index]" class = "t" id="txtarea"></textarea>    
        <button id = "firstbutton" class ="btn btn-success nbutton" ng-click = "listcontrolctrl.addtext($index)">Add
        </button><img id ="remove1" src ="remove.png"  ng-click ="listcontrolctrl.removecontrols($index)"></img></div>`
};
});