javascript - 值(value)在服务上更新，但不在 Controller 上更新

我试图检测何时在页面上激活了移动媒体查询。为此，我使用了“幻影” div。

<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);
            });

        }
    }
}])

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

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

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

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

    };
})

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

最佳答案

.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事件，您已经完成了angular以外的事情，因此，您必须告诉angular hey angular! update yourself。您可以通过运行上面的scope.$apply()来实现。

关于javascript - 值(value)在服务上更新，但不在 Controller 上更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31342933/