angular.js - AngularJS mask layer display problem

Question

I encountered a problem and I don’t know how to solve it. I hope someone who knows can help me figure out where the problem is.

I want to click a p on the page to dynamically display a mask layer.
I now add ng-click='showFav()' to the p that controls the display, and add ng-show='showMenu' to the outermost p of the mask layer. I want to The display of the mask layer is controlled through the $scope.showMenu value.

The problem now is that after the $scope.showMenu value on my page is set to true in showFav(), the mask layer is not displayed.

During debugging, I found that after running showFav, the value of showMenu became false. I don't understand this. . .

Do you need to $scope.$apply() after modifying the showMenu value??? But an error will be reported: [$rootScope:inprog], I am very convenient. . .

    storeApp.controller('productCtrl', ['$scope', '$http', 'Cart', function($scope, $http, Cart){
        $scope.showMenu = false;

        $scope.addItem1 = function(productSku, num, storeKey) {
            Cart.addtoCart(productSku, num, storeKey);
        };
        $scope.showFav = function(item) {
            $scope.chooseItem = item;
            $scope.showMenu = true;
        };
    }]);
    
    storeApp.directive('choosefav', [function() {
    return {
        restrict: 'AE',
        replace: true,
        templateUrl: 'template/mask.html'
    };

Page

    <p ng-controller="productCtrl" ng-show="showMenu">
        <choosefav></choosefav>
    </p>

Answer 1

1. Don’t put basic type values ​​directly on the scope. You can define a vm object to store these values, which can avoid some strange problems, such as:

storeApp.controller('ctrlName',function($scope){
    $scope.vm={
        showMenu:false
    };
    
    $scope.showFav = function(item) {
        $scope.chooseItem = item;
        $scope.vm.showMenu = true;
    };
});

2. I don’t know what the structure of your page is like, and the relationship between the p that binds the click event and the mask layer. You’d better post the html to take a look

Answer 2

If your directive does not define a scope for the directive, it means that it shares the same scope as the parent, so you can use it directly in your directive template

ng-show="showMenu"

To control whether to display or not.

Of course, you can make the mask layer global and use it anywhere.
Define an independent scope, such as:

scope:{
    show : '='
}

The command is written as:

<choosefav  show="showMenu"></choosefav>

Just define the value of showMenu in the controller.