angular.js - AngularJS 遮罩层显示问题

Question

遇到一个问题，不知道怎么解决，希望有知道的人能够帮我看看是哪边出了问题。

我是想要在页面上点击一个p，动态的显示一个遮罩层。
我现在在控制显示的这个p里面添加了一个ng-click='showFav()', 在这个遮罩层最外面的一个p上面添加了一个ng-show='showMenu', 我是想通过$scope.showMenu值来控制遮罩层的显示的。

现在问题就是，我页面上的这个$scope.showMenu值在showFav()里面设置成true之后，并没有让遮罩层显示出来。

调试的时候发现，运行完这个showFav之后，showMenu这个值就变成了false。这点不解啊。。。

是不是修改showMenu值之后要$scope.$apply()??? 但是会报错：[$rootScope:inprog]，我很方啊。。。

    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'
    };

页面

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

Answer 1

1. 기본 유형 값을 범위에 직접 입력하지 마세요. vm 객체를 정의하여 이러한 값을 저장할 수 있습니다. 이렇게 하면 다음과 같은 이상한 문제를 피할 수 있습니다. 으아악

2. 페이지 구조가 어떤지, 클릭 이벤트를 바인딩하는 p와 마스크 레이어의 관계를 모르니 html을 게시하고 살펴보는 것이 좋습니다.

Answer 2

지시문이 지시문의 범위를 정의하지 않는 경우 이는 상위 항목과 동일한 범위를 공유하므로 지시문 템플릿에서 직접 사용할 수 있음을 의미합니다

으아악

표시 여부를 제어합니다.

물론 마스크 레이어를 전역으로 만들어 어디에서나 사용할 수 있습니다.
다음과 같이 독립적인 범위를 정의합니다.

으아악

명령은 다음과 같이 작성됩니다.

으아악

컨트롤러에서 showMenu 값을 정의하기만 하면 됩니다.