Question

我尝试创建服务来监听浏览器窗口大小的变化，并告诉我它是手机还是平板电脑。我正在使用matchmedia-ng插件来实现此matchmedia-ng。我已经成功地在下面的控制器中工作了。

但我希望将它作为工厂服务，以便我可以在其他控制器中使用它。我在这方面一直不成功，任何人都可以帮助我吗？请注意，我想在服务工厂中放入loginCtrl中的var deviceListernerPhone，deviceListernerTablet和deviceListerDesktop。

我的编码在下面是html partial和ctrl在下面：

局部的login.html

<ng-include src="deviceView()"></ng-include>

loginCtrl

app.controller('loginCtrl', ['$scope','loginService','matchmedia', function($scope,loginService,matchmedia){
        $scope.login = function(){
        loginService.login (this.user); 
        }

   var deviceListernerPhone = matchmedia.onPhone(function(mediaQueryList){
            $scope.isPhone= mediaQueryList.matches;
        })

   var deviceListernerTablet = matchmedia.onTablet(function(mediaQueryList){
            $scope.isTablet= mediaQueryList.matches;
        })

   var deviceListernerDesktop = matchmedia.onDesktop(function(mediaQueryList){
            $scope.isDesktop= mediaQueryList.matches;
        })


   $scope.deviceView= function(){
    if ($scope.isPhone){
        return 'partials/login/tpl/login-phone.html';
    } else if($scope.isTablet){
        return 'partials/login/tpl/login-tablet.html';
    } else{
        return 'partials/login/tpl/login-desktop.html';
    }
   }//end deviceview 

}])

Answer 1

包含媒体信息的服务如下所示：

app.service('MediaService',['matchmedia',function(matchmedia){
    var scope = this;
     matchmedia.onPhone(function(mediaQueryList){
            scope.isPhone= mediaQueryList.matches;
        });

   matchmedia.onTablet(function(mediaQueryList){
            scope.isTablet= mediaQueryList.matches;
        });

   matchmedia.onDesktop(function(mediaQueryList){
            scope.isDesktop= mediaQueryList.matches;
        });
}]);

你应该把它注入你的控制器，如：

app.controller('loginCtrl', ['$scope','loginService','MediaService', function($scope,loginService,mediaService){
        $scope.login = function(){
        loginService.login (this.user); 
        }

   $scope.deviceView= function(){
    if (mediaService.isPhone){
        return 'partials/login/tpl/login-phone.html';
    } else if(mediaService.isTablet){
        return 'partials/login/tpl/login-tablet.html';
    } else{
        return 'partials/login/tpl/login-desktop.html';
    }
   }//end deviceview 

}]);

Answer 2

您可以通过某种方式构建服务，以便它可以接受来自控制器本身的matchmedia服务的回调。

    app.service("matchMediaService", function(matchmedia) {

        this.registerCallbacks = function(onPhoneCallback, onPhoneCallback, onDesktopCallback) {
            matchmedia.onTablet = onPhoneCallback;
            matchmedia.onPhone = onPhoneCallback;
            matchmedia.onDesktop = onDesktopCallback;
        };

    });


    app.controller('loginCtrl', ['$scope','loginService','matchMediaService', function($scope,loginService,matchmedia){
        $scope.login = function(){
            loginService.login (this.user); 
        }

        $scope.onPhone = function(mediaQueryList){
            $scope.isPhone= mediaQueryList.matches;
        });


       $scope.onTablet = function(mediaQueryList){
            $scope.isTablet= mediaQueryList.matches;
       };

       $scope.onDesktop = function(mediaQueryList){
            $scope.isDesktop= mediaQueryList.matches;
        };

        matchMediaService.registerCallbacks($scope.onPhone, $scope.onTablet, $scope.onDesktop);

       $scope.deviceView= function(){
        if ($scope.isPhone){
            return 'partials/login/tpl/login-phone.html';
        } else if($scope.isTablet){
            return 'partials/login/tpl/login-tablet.html';
        } else{
            return 'partials/login/tpl/login-desktop.html';
        }
       }//end deviceview 

    }])

工厂服务中的Angularjs事件/监听器

2 个答案: