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. Ne mettez pas les valeurs de type de base directement sur la portée. Vous pouvez définir un objet vm pour stocker ces valeurs, ce qui peut éviter certains problèmes étranges, tels que :

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

2. Je ne sais pas à quoi ressemble la structure de votre page et la relation entre le p qui lie l'événement de clic et le calque de masque. Vous feriez mieux de publier le code HTML pour y jeter un œil

.

Answer 2

Si votre directive ne définit pas de portée pour la directive, cela signifie qu'elle partage la même portée que le parent, vous pouvez donc utiliser directement

dans votre modèle de directive.

ng-show="showMenu"

pour contrôler l'affichage ou non.

Bien sûr, vous pouvez rendre le calque de masque global et l'utiliser n'importe où.
Définissez un périmètre indépendant, tel que :

scope:{
    show : '='
}

La commande se lit :

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

Définissez simplement la valeur de showMenu dans le contrôleur.