当单击按钮以调用“ hideProductIncentives”时，没有任何反应

Question

我在这里面临的主要问题是我有两个div和两个几乎相同的指令。两者之间的主要区别在于，一个是大多数变量都更改为产品，另一个是全局变量，因为在此过程中我将需要进行很多外观上的更改。

全局指令和HTML完全按预期工作。在该div中单击“关闭”按钮时，所有内容都将更改为“ display：none”，而在productIncent div中单击“关闭”按钮时，hideProductIncentives（）函数似乎甚至没有被调用。

控制器和指令是否相互干扰？

<div class="hero-container">

          <?php
          global $children;
          global $post;
          if ( $post->post_parent ) {
            $children = wp_list_pages( array(
              'title_li' => '',
              'child_of' => $post->post_parent,
              'echo'     => 0
            ) );
             } else {
            $children = wp_list_pages( array(
              'title_li' => '',
              'child_of' => $post->ID,
              'echo'     => 0
              ) );
            }
            if ( $children ) : ?>

          <?php echo '<div class="hero-side-menu">', '<h1>', get_the_title(), '</h1>', '<ul>', $children, '</ul>', '</div>' ?>

         <?php endif; ?>
  </div>

HTML：

angular.module('ProductSelectorApp-main')
.directive('getGlobalIncentives', function (myFactory, serverData, $rootScope) {  
    return {
        restrict: 'E',
        template: '<button class="slds-button slds-button_brand" ng-click="showGlobalIncentives()">Incentives</button>',
        controller: function ($scope, $modal) {
          // $scope.selectedCurrency=[{ConversionRate:1.0 ,IsoCode:"USD" }]; 
           $scope.showGlobalIncentives = function() {
           document.getElementById('globalIncent').style.display='block';
           $scope.isRequestProcessing = false;



        }
        $scope.hideGlobalIncentives = function() {
            document.getElementById('globalIncent').style.display='none';
            $scope.isRequestProcessing = false;



         }      


        }
    }
});

angular.module('ProductSelectorApp-main')
.directive('getProductIncentives', function (myFactory, serverData, $rootScope) {  
    return {
        restrict: 'E',
        template: '<button class="slds-button slds-button_brand" ng-click="showProductIncentives()">Incentives</button>',
        controller: function ($scope, $modal) {
            this.name='testController';
          // $scope.selectedCurrency=[{ConversionRate:1.0 ,IsoCode:"USD" }]; 
           $scope.showProductIncentives = function() {
           document.getElementById('productIncent').style.display='block';
           $scope.isRequestProcessing = false;



        }

        $scope.hideProductIncentives = function() {
            document.getElementById('productIncent').innerHTML='';
            $scope.isRequestProcessing = false;



         } 

        }
    }
});