Question

我正在尝试构建一个带有静态页眉和页脚布局的页面，但是使用ng-view或ng-include来根据URL更改我的容器模板。我尝试了两种方法：

使用$ routeProvider：

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        template: 'views/home.html',
        controller: 'Ctrl',
    });
    $routeProvider.when('/contact-us', {
        template: 'views/contact.html',
        controller: 'Ctrl',
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });

}]);

或用于返回模板URL的控制器函数：

app.controller('locationCtrl', function ($scope, $location, $routeParams) {
    $scope.templateUrl = function() {
        return "/views/home.html";

    }
});

然而，对于任何一个，我都无法收到联系我们错误消息。

Answer 1

routerProvider在所有控制器之前运行。所以你不能简单地动态更改templateUrls。但您可以有条件地使用ng-include：

<div ng-controller="SubPageCtrl>
    <ng-include src="templateUrl"></ng-include>
</div>
<script>
function SubPageCtrl($scope) {
    if ( something ) {
         $scope.templateUrl = '/some.html';
    } else {
         $scope.templateUrl = '/other.html';
    }
}
</script>

Answer 2

app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
    template: 'views/home.html',
    controller: 'Ctrl',
});
$routeProvider.when('/contact-us', {
    template: 'views/contact.html',
    controller: 'Ctrl', // Controller should be different
});
$routeProvider.otherwise({
    redirectTo: '/'
});
}]);

替换为：

 app.config(['$routeProvider', function ($routeProvider) 
$routeProvider.when('/', {
    templateUrl: 'views/home.html', //template should be templateUrl
    controller: 'Ctrl',
});
$routeProvider.when('/contact-us', {
    templateUrl: 'views/contact.html', //template should be templateUrl
    controller: 'Ctrl',
});
$routeProvider.otherwise({
    redirectTo: '/'
});
}]);

您的第一种方法可行。

Answer 3

您应该将路线从更具体的网址定义为更一般的网址。因为路线与以您的定义开头的网址相匹配。

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/contact-us', {
        template: 'views/contact.html',
        controller: 'Ctrl',
    });
    $routeProvider.when('/', {
        template: 'views/home.html',
        controller: 'Ctrl',
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });

}]);

Angular.js动态模板与不同的url

3 个答案: