使用角度和角度路線擴展動態標題

我使用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屬性是什麼標題屬性是資源的

來源

2015-01-13 corvid

注入你的工廠被稱爲第二條在routeChangeSuccess搶你的稱號工廠返回，並給它分配$ rootScope.title變量... – micronyks

你可以在你的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); 
     }); 
    } 
]);

來源

2015-01-13 19:17:16

我認爲你最好在你的路線中使用解析。您可以使用它從您的服務中獲取文章並同時設置標題。使用決心的例子：你沒有獲取在控制器文章

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文檔： - {對象=} -

解決依賴性的一個可選的映射應該被注射到控制器。如果這些依賴關係中的任何一個都是承諾，那麼路由器將等待它們全部被解析或者在控制器被實例化之前被拒絕。如果所有的承諾都成功解決，解決的承諾的值被注入並且$ routeChangeSuccess事件被觸發。

見https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

來源

2015-01-13 19:45:01 iH8

使用角度和角度路線擴展動態標題

回答

相關問題