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 の値を定義するだけです。