javascript - 具有不同 url 的 Angular.js 动态模板

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

您应该定义从更具体的 url 到更通用的 url 的路线。因为路由与以您的定义开头的 url 匹配。

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: '/'
    });

}]);