遇到一个问题,不知道怎么解决,希望有知道的人能够帮我看看是哪边出了问题。
我是想要在页面上点击一个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>
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:
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
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
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:
The command is written as:
Just define the value of showMenu in the controller.