Question

我在角度模块中配置adaptive templating配置阶段。但我的所有控制器都需要配置值。如何将config值传递给我的$scope对象？

所以我可以查看我使用的模板media吗？

这是我的代码：

"user strict";

angular.module('responsive', ['ngRoute', 'matchmedia-ng', 'adaptiveTemplating'])

.config(function (adaptiveTemplatingProvider) {

  var isMobile = window.matchMedia('(max-width: 767px)').matches; //how to set to $scope ?
  adaptiveTemplatingProvider.addTest('mobile', isMobile);

  var isDesktop = window.matchMedia('(min-width: 1024px)').matches; //how to set to $scope ?
  adaptiveTemplatingProvider.addTest('desktop', isDesktop);



})

.config(function ($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $routeProvider
    .when ("/", {
        templateUrl : "views/{mobile}{desktop}/home.html", //this is working according to the viewport.
        controller  : "homeController"
    });

})

.controller("homeController", function ($scope) {

    if($scope.isMobile) { // how to get here from config?
        console.log("i am mobile");
    }

    if ($scope.isDesktop) {
        console.log("i am desktop!")
    }

})

更新

  angular.module('responsive', ['ngRoute', 'matchmedia-ng', 'adaptiveTemplating'])

    .config(function (adaptiveTemplatingProvider, $window) { //passing

      var isMobile = $window.matchMedia('(max-width: 767px)').matches; //how to set to $scope ?
      adaptiveTemplatingProvider.addTest('mobile', isMobile);

      var isDesktop = $window.matchMedia('(min-width: 1024px)').matches; //how to set to $scope ?
      adaptiveTemplatingProvider.addTest('desktop', isDesktop);

    })

如果我使用window，则可以使用$window。是什么原因？如何为我的场景注入$window？

Answer 1

您可以使用library method getTests

{function} getTests（）

检索所有已注册的测试。
@returns {Object} Hash of all tests.

UPD：不要忘记注入adaptiveTemplatingProvider作为依赖。并且请勿使用window代替$window。

UPD 2：非常脏的解决方案如下所示：

!function () {
    "user strict"; 

    // as matchMedia is component from angular-match-media
    // you can use this module directly instead of this hook
    window.HOOK = {
        isMobile: window.matchMedia('(max-width: 767px)').matches,
        isDesktop: window.matchMedia('(min-width: 1024px)').matches
    };

    angular
        .module('responsive', [
            'ngRoute', 
            'matchmedia-ng', 
            'adaptiveTemplating'
        ]) 
        .config(function (adaptiveTemplatingProvider) { 
            adaptiveTemplatingProvider.addTest('mobile', window.HOOK.isMobile); 
            adaptiveTemplatingProvider.addTest('desktop', window.HOOK.isDesktop); 
        }) 
        .config(function ($routeProvider, $locationProvider) { 
            $locationProvider.html5Mode(true); 
            $routeProvider 
                .when ("/", { 
                    templateUrl : "views/{mobile}{desktop}/home.html", 
                    controller  : "homeController" 
                }); 
        }) 
        .controller("homeController", HomeController);

    function HomeController() {
        console.log(window.HOOK);
    }
})();

但我强烈建议您花更多时间来发现angular-match-media，并了解如何在您的案例中使用它。

Answer 2

将其初始化为常量：

app.constant('ngSettings', {
    configIsMobile: isMobile ,
  configIsDesktop: isDesktop,
});

在控制器中将其注入：

.controller("homeController", function ($scope, ngSettings) {

    $scope.isMobile = ngSettings.configIsMobile;
    $scope.isDesktop = ngSettings.configIsDesktop;
    if($scope.isMobile) { 
        console.log("i am mobile");
    }

    if ($scope.isDesktop) {
        console.log("i am desktop!")
    }

})

Answer 3

最好在.run块中配置路径并将所有应用设置移动到separete服务（工厂）文件，这可以通过注入返回它们。你可以注入任何你想要的块。

示例：

angular.module('yourAppApp.globalSettings',[]).factory('globalSettings', function (adaptiveTemplating, $window){
    var isMobile = $window.matchMedia('(max-width: 767px)').matches; //how to set to $scope ? adaptiveTemplatingProvider.addTest('mobile', isMobile);

    var isDesktop = $window.matchMedia('(min-width: 1024px)').matches; //how to set to $scope ?
    adaptiveTemplatingProvider.addTest('desktop', isDesktop);

    var Settings = {
       isMobile: isMobile,
       isDesktop: isDesktop
    };

   return Settings;
});

angular.module('yourAppApp', ['yourAppApp.globalSettings']).
   run(['$routeProvider', '$locationProvider',run]).
   controller(['globalSettings','$scope', homeController);

function run($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
      .when ("/", {
      templateUrl : "views/{mobile}{desktop}/home.html", //this is working according to the viewport.
      controller  : "homeController"
    });
}

   function homeController(globalSettings, $scope) {
      if(globalSettings.isMobile) { // how to get here from config?
        console.log("i am mobile");
    }
}

如何在`$ scope`对象中获取`config`值？

3 个答案:

{function} getTests（）