angular.js - AngularJS 遮罩层显示问题
我想大声告诉你
我想大声告诉你 2017-05-15 17:06:36
0
2
748

遇到一个问题,不知道怎么解决,希望有知道的人能够帮我看看是哪边出了问题。

我是想要在页面上点击一个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>
我想大声告诉你
我想大声告诉你

全部回复(2)
淡淡烟草味

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也贴出来看下

大家讲道理

你如果指令没有给指令定义scope,则表示和父公用同个scope作用域,那么你在你的指令模板里可以直接用

ng-show="showMenu"

来控制是不是显示。

当然,你可以把遮罩层搞成一个全局的,任何地方都可以使用。
定义一个独立作用域,比如:

scope:{
    show : '='
}

指令上写为:

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

控制器里再接着定义showMenu的值就行。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!