Angularjs меняет вид на размер окна

Я занят приложением Angularjs, и все в порядке, но у меня проблема с реализацией мобильной версии сайта. Я не могу просто реагировать на стили, мне нужно использовать разные файлы просмотра для мобильных/настольных версий. Так, в моем приложении я использую UI-маршрутизатор с следующей конфигурацией:Angularjs меняет вид на размер окна

dopGruz 
    .config([ '$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider){ 
    $stateProvider 
     .state('root',{ 
      views: { 
       "navbar" : { 
        controller: 'viewsController', 
        templateProvider: function($http, viewsWatcherFactory) { 
         return viewsWatcherFactory 
          .get('app/views/nav-bar.html') 
          .then(function(obj){ 
           return $http 
            .get(obj.templateName) 
            .then(function(tpl){ 
             return tpl.data; 
            }); 
          }); 
       } }, 
       "" : { template: '<div ui-view></div>' } 
      } 
     })

Моей фабрика возвращающей мобильного шаблона на основе шириной окна

dopGruz.factory('viewsWatcherFactory', [ 
    '$http', 
    '$timeout', 
    function($http, $timeout) { 

     var _ifMobile = (function(){ 
      return window.innerWidth < 850; 
     })(); 

     return { 
      get : function(id) { 
       return $timeout(function(){ 
        var path = id; 
        if (_ifMobile) { 
         path = id.split('/'); 
         path.splice(path.length-1,0,'mobile'); 
        } 
        if (Array.isArray(path)) { 
         path = path.join('/'); 
        } 
        return {templateName : path}; 
       }, 0); 
      } 
     }; 
    } 
]);

Это хорошо работает при загрузке страницы - если ширина окна < 850px - он фактически загружает мобильную версию шаблона. Но есть ли способ вызвать templateProvider вручную на основе события? У меня есть контроллер, в котором я хотел бы реализовать:

dopGruz.controller('viewsController', function ($scope,$window) { 

    angular.element($window).bind('resize', function() { 
     console.log($window.innerWidth); 
     // do some magic and call templateProvider and update views files. 
     $scope.$digest(); 
    }); 

});

Возможно, есть более простой и правильный способ сделать это. Любая помощь будет оценена

источник

2015-10-08 b3ndr

Я бы использовал ng-include и присвоил атрибуту src переменной области видимости, которая указывает либо на мобильную, либо на настольную версию шаблона. Я не делал этого полностью, но вы должны получить идею по этому образцу.

Контроллер:

app.controller('MainCtrl', function($scope) { 
$scope.templates = 
[ { name: 'mobile.html', url: 'mobile.html'}, 
    { name: 'desktop.html', url: 'desktop.html'} ]; 
$scope.template = $scope.templates[0]; 
});

Основной шаблон:

<body ng-controller="MainCtrl"> 
    <ng-include class="col-md-12" src="template.url"></ng-include> 
</body>

Мобильный шаблон:

<div>mobile template</div>

шаблон Desktop:

<div>desktop template</div>

источник

2015-10-09 00:06:07 jbrown

Angularjs меняет вид на размер окна

ответ

Смежные вопросы