遇到一個(gè)問(wèn)題,不知道怎么解決,希望有知道的人能夠幫我看看是哪邊出了問(wèn)題。
我是想要在頁(yè)面上點(diǎn)擊一個(gè)p,動(dòng)態(tài)的顯示一個(gè)遮罩層。
我現(xiàn)在在控制顯示的這個(gè)p里面添加了一個(gè)ng-click='showFav()', 在這個(gè)遮罩層最外面的一個(gè)p上面添加了一個(gè)ng-show='showMenu', 我是想通過(guò)$scope.showMenu值來(lái)控制遮罩層的顯示的。
現(xiàn)在問(wèn)題就是,我頁(yè)面上的這個(gè)$scope.showMenu值在showFav()里面設(shè)置成true之后,并沒(méi)有讓遮罩層顯示出來(lái)。
調(diào)試的時(shí)候發(fā)現(xiàn),運(yùn)行完這個(gè)showFav之后,showMenu這個(gè)值就變成了false。這點(diǎn)不解啊。。。
是不是修改showMenu值之后要$scope.$apply()??? 但是會(huì)報(bào)錯(cuò):[$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'
};
頁(yè)面
<p ng-controller="productCtrl" ng-show="showMenu">
<choosefav></choosefav>
</p>
1.基本類型的值,不要直接放在scope上,可以定義一個(gè)vm對(duì)象來(lái)存這些值,可以避免一些奇怪的問(wèn)題,比如:
storeApp.controller('ctrlName',function($scope){
$scope.vm={
showMenu:false
};
$scope.showFav = function(item) {
$scope.chooseItem = item;
$scope.vm.showMenu = true;
};
});
2.我不知道你頁(yè)面結(jié)構(gòu)是什么樣的,綁定點(diǎn)擊事件的p與遮罩層的關(guān)系,你最好把html也貼出來(lái)看下
你如果指令沒(méi)有給指令定義scope,則表示和父公用同個(gè)scope作用域,那么你在你的指令模板里可以直接用
ng-show="showMenu"
來(lái)控制是不是顯示。
當(dāng)然,你可以把遮罩層搞成一個(gè)全局的,任何地方都可以使用。
定義一個(gè)獨(dú)立作用域,比如:
scope:{
show : '='
}
指令上寫為:
<choosefav show="showMenu"></choosefav>
控制器里再接著定義showMenu的值就行。