Question

我想知道是否有任何方法可以根据主机使用不同的页脚。

        $stateProvider.state('home', {
        url : '/page',
        views : {
            "main" : {
                templateUrl : '/buy/product.html'
            },
            "footer" : {
                template : '<footer show-list="false"></footer>'
            }   
        }
    });

例如，如果我当前的主机名是“ test.domain.com”，我想将显示列表设置为true

      template : '<footer show-list="true"></footer>'

关于我该怎么做的任何建议？

Answer 1

如果页脚中有控制器，则可以使用ng-if或ng-show从模板中的控制器中引用$ scope变量

progress

或

<footer ng-if="showList"></footer>

然后在检查从“ window.location.href”返回的当前URL的字符串后，在控制器中将$ scope变量设置为“ showList”。

<footer ng-show="showList"></footer>

如果页脚没有控制器，则可以内联声明

$scope.showList = false;

var currentHost = window.location.href;

if(currentHost.includes("test.domain.com")){
    $scope.showList = true;
}

编辑

如果您需要在路由器中执行此操作，则可以简单地调用您在路由器中创建的函数，或者使用此函数创建要传递给路由器的服务。

<footer ng-controller="yourController" ng-if="showList"></footer>

或者，您可以创建要在状态配置中使用的服务

var isTestDomain = function(){
    var location = window.location.href;
    if(location.includes("test.domain.com"){
        return true;
    } else {
        return false;
    }
}

$stateProvider.state('home', {
    url : '/page',
    views : {
        "main" : {
            templateUrl : '/buy/product.html'
        },
        "footer" : {
            template : '<footer ng-if="isTestDomain()"></footer>'
        }   
    }
})

然后从模板中的服务调用函数

angular.module('YourModule').service('locationSvc', function(){
    this.isTestDomain = function(){
        var location = window.location.href;
        if(location.includes("test.domain.com"){
            return true;
        } else {
            return false;
        }
    }
});

Angular ui路由器根据环境使用不同的模板

1 个答案: