Question

我试图检测何时在我的网页上激活移动媒体查询。为此，我使用了幻象＆＃34;格。

<div class="mobile-alert" mobile-mode></div>

当移动媒体查询被激活时，课程.mobile-alert设置为display:none，而当他们不是display: block时，设置.directive('mobileMode', ["shareProperties", function(shareProperties){ return{ link: function(scope, elem, attrs){ var mobileSize; $(window).resize(function(){ var mobileSize = $(elem).is(':visible'); shareProperties.setMobileSize(mobileSize); }); } } }])。现在我使用以下指令：

.factory("shareProperties", function(){
    var properties = {mobileSize: false};

    return {
        getMobileSize: function(){
            return properties.mobileSize;
        },
        setMobileSize: function(value){

            properties.mobileSize = value;
            console.log(this.getMobileSize());
        }

    };
})

它监视此div是否可见，并且我知道该页面是否处于移动模式。然后，在shareProperties服务上：

ctrl.mobileMode = shareProperties.getMobileSize;

我与一些控制器共享此变量。但是，变量是在此服务中设置的，但是当我尝试在控制器上使用它们时，如{{ctrl.mobileMode()}}，在V_AREA的HTML上调用此函数始终显示为false。有什么想法吗？

Answer 1

.directive('mobileMode', ["shareProperties", function(shareProperties){
    return{
        link: function(scope, elem, attrs){
            var mobileSize;
            $(window).resize(function(){
                var mobileSize = $(elem).is(':visible');
                shareProperties.setMobileSize(mobileSize);
                scope.$apply();
            });

        }
    }
}])

你已经通过聆听$(window).resize事件做了一些超出角度的事情，因此你必须告诉角度hey angular! update yourself。您可以通过运行上面的scope.$apply()来实现此目的。

值在服务上更新，但在控制器上不更新

1 个答案: