Question

我使用this answer开始动态设置应用程序的标题。一种解决方案几乎完美地工作，除了一种情况。以下是我的路由器：

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/partials/home.html',
            controller: 'home',
            title: "Corvid"
        })
        .when('/archive', {
            templateUrl: "/partials/archive/all.html",
            controller: "archive",
            title: "Archive"
        }).
        when('/archive/:id', {
            templateUrl: "/partials/archive/one.html",
            controller: "article",
            title: ""
        })
        .otherwise({
            templateUrl: "/partials/errors/404.html",
            title: "Something went wrong!"
        });
    }
]);

app.run(['$location', '$rootScope', 
    function($location, $rootScope) {
        $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
            $rootScope.title = current.$$route.title;
        });
    }
]);

当使用预定义和具体的字符串（如“Corvid”）时，它可以很好地工作。但是，对于/archive/:id的情况，我想要一些更随意的东西; 文章的标题。也就是说，#/archive/2/会将title设置为突发新闻; corvid糟透了angular.js 。这是我的工厂文章：

services.factory('Article', ['$resource', function($resource) {
        return $resource('/api/v1/articles/:articleId', {}, {
            query: { method: 'GET', params: { articleId: '' } }
        });
    }
]);

因此，当我抓住其中一篇文章时，我希望title属性为该资源的title属性

Answer 1

您可以将title属性更改为方法，如下所示：

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/partials/home.html',
            controller: 'home',
            title: function () { return "Corvid"; }
        })
        .when('/archive', {
            templateUrl: "/partials/archive/all.html",
            controller: "archive",
            title: function () { return "Archive"; }
        }).
        when('/archive/:id', {
            templateUrl: "/partials/archive/one.html",
            controller: "article",
            title: function (Article) { return Article.get(this.id).title; }
        })
        .otherwise({
            templateUrl: "/partials/errors/404.html",
            title: function () { return "Something went wrong!"; }
        });
    }
]);

然后再调用它，并传递注入的Article服务。

app.run(['$location', '$rootScope', 'Article',
    function($location, $rootScope, Article) {
        $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
            $rootScope.title = current.$$route.title(Article);
        });
    }
]);

Answer 2

我认为你最好在你的路线中使用决心。您可以使用它来获取服务中的文章并同时设置标题。使用resolve的示例：

resolve = {
    article: ['$route', 'Service', function($route, Service) {
        var id = $route.current.params.id;
        return Service.get({'id': id}).$promise.then(function(article) {
            $route.current.$$route.title = article.id;
            return article;
        });
    }]
}

现在您不必在控制器中获取文章，只需注入article，同时您在路线中设置了title属性，这样您的routechangehandler就可以了按预期工作。

来自API文档：

resolve - {Object。=} - 应该注入控制器的可选依赖关系图。如果这些依赖项中的任何一个是promise，路由器将等待它们全部被解析或者在实例化控制器之前被拒绝。如果成功解决了所有promise，则会注入已解析的promise的值并触发$ routeChangeSuccess事件。

请参阅https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

使用角度和角度路径扩展动态标题

2 个答案: