Question

我忙于Angularjs应用程序，一切都很好，但我在实现移动版网站时遇到了问题。我不能只做响应式样式，我需要为移动/桌面版本使用不同的视图文件。因此，在我的应用程序中，我使用ui-router和以下配置：

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

这适用于页面加载 - 如果窗口宽度＆lt; 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();
    });

});

也许有一种更简单正确的方法。任何帮助将不胜感激

Answer 1

我会使用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>

桌面模板：

<div>desktop template</div>

Angularjs更改窗口大小调整视图

1 个答案: