问题描述
遇到一个问题，不知道怎么解决，希望有知道的人能够帮我看看是哪边出了问题。
我是想要在页面上点击一个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：1.基本类型的值，不要直接放在scope上，可以定义一个vm对象来存这些值，可以避免一些奇怪的问题，比如：
storeApp.controller(’ctrlName’,function($scope){ $scope.vm={showMenu:false };$scope.showFav = function(item) {$scope.chooseItem = item;$scope.vm.showMenu = true; };});
2.我不知道你页面结构是什么样的，绑定点击事件的p与遮罩层的关系，你最好把html也贴出来看下
回答2：你如果指令没有给指令定义scope，则表示和父公用同个scope作用域，那么你在你的指令模板里可以直接用
ng-show='showMenu'
来控制是不是显示。
当然，你可以把遮罩层搞成一个全局的，任何地方都可以使用。定义一个独立作用域，比如：
scope:{ show : ’=’}
指令上写为：
<choosefav show='showMenu'></choosefav>
控制器里再接着定义showMenu的值就行。
