Question

我如何获得此功能：

$rootScope.$watch(function () {
            return $mdMedia('md');
        }, function watchCallback(newValue, oldValue) {
            $scope.detectScreen = $mdMedia('max-width: 1280px');
        })

目前在我的控制器中进入服务/工厂，所以我可以在多个控制器中使用它。

   .factory('MyFactory', [
        '$rootScope',
        '$mdMedia',
       function ($rootScope, $mdMedia) {

           return {
               detectScreen: function (param) {
                ***///get the function to work from here///***
               }
           }

       }
    ])

Answer 1

在没有手表的情况下将该功能放入工厂：

app.factory('MyFactory', ['$mdMedia',
   function ($mdMedia) {
       return {
           detectScreen: function () {
               return $mdMedia('max-width: 1280px');
           };
       }
   }
]);

在控制器中，使用$doCheck Life-Cycle Hook使范围变量保持最新：

app.controller("myController", function(myFactory, $scope) {
    this.$doCheck = function () {
        $scope.detectScreen = myFactory.detectScreen();
    };
});

Answer 2

我自己解决了这个问题。它可能涉及到谁，这就是答案。把它放在你的控制器中：

 $scope.$watch(function () {
            return CmsFactory.detectScreen();
        }, function watchCallback(small) {
            $scope.detectScreen = small;
        })

这在你的工厂：

return {
        detectScreen: function () {
            return $mdMedia('md');
        }
    }

Answer 3

或者，您可以将$watch移动到app.run()，并在控制器可以捕获的更改时发出事件。

Answer 4

我进行一些研究时遇到了这个答案。我的声誉不够高，无法发表评论，但是要回答jhon dano向ookadoo提问，我想他的意思是：

如果将$ mdMedia注入控制器，则可以在屏幕尺寸更改时使用手表来更新作用域变量。

手表看起来像这样：

    $scope.ScreenIsXs = false;

    $scope.$watch(function () {
            return $mdMedia('xs');
        }, function watchCallback(response) {
            //console.log(response); //test code
            $scope.ScreenIsXs = response;
    });

然后，您可以使用$ scope变量在html中驱动ng-if：

    <div ng-if="ScreenIsXs">I only show when your window is very small! </div>

这对于不需要工厂/服务的简单应用程序很有用。就是说，您的问题直接表明您需要服务/工厂，因此我不确定在找到解决方案之前响应将是多么有用。

无论如何，我希望这能使ookadoo对以后偶然发现这些答案的任何人的回答变得清晰。

使用$ mdMedia来自服务/工厂的角度$ watch屏幕尺寸

4 个答案: