angular.js - Masalah paparan lapisan topeng AngularJS

Question

Saya menghadapi masalah dan saya tidak tahu cara menyelesaikannya. Saya harap seseorang yang tahu boleh membantu saya mengetahui di mana masalahnya.

Saya mahu mengklik p pada halaman untuk memaparkan lapisan topeng secara dinamik.
Saya kini menambah ng-click='showFav()' pada p yang mengawal paparan, dan menambah ng-show='showMenu' pada p paling luar lapisan topeng saya mahu Paparan lapisan topeng dikawal melalui nilai $scope.showMenu.

Masalahnya sekarang ialah selepas nilai $scope.showMenu pada halaman saya ditetapkan kepada benar dalam showFav(), lapisan topeng tidak dipaparkan.

Semasa nyahpepijat, saya mendapati bahawa selepas menjalankan showFav, nilai showMenu menjadi palsu. Saya tidak faham ini. . .

Adakah anda perlu $scope.$apply() selepas mengubah suai nilai showMenu??? Tetapi ralat akan dilaporkan: [$rootScope:inprog], saya sangat senang. . .

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

Halaman

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

Answer 1

1. Jangan letakkan nilai jenis asas secara langsung pada skop Anda boleh menentukan objek vm untuk menyimpan nilai ini, yang boleh mengelakkan beberapa masalah pelik, seperti:

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

2. Saya tidak tahu bagaimana struktur halaman anda dan hubungan antara p yang mengikat acara klik dan lapisan topeng. Anda lebih baik menyiarkan html untuk melihat

Answer 2

Jika arahan anda tidak mentakrifkan skop untuk arahan itu, ini bermakna arahan itu berkongsi skop yang sama dengan induk, jadi anda boleh terus menggunakan

dalam templat arahan anda.

ng-show="showMenu"

untuk mengawal sama ada untuk dipaparkan atau tidak.

Sudah tentu, anda boleh menjadikan lapisan topeng global dan menggunakannya di mana-mana sahaja.
Tentukan skop bebas, seperti:

scope:{
    show : '='
}

Arahan itu berbunyi:

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

Hanya tentukan nilai showMenu dalam pengawal.