각도 및 각도 경로를 사용하여 동적 제목으로 확장

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 속성이 해당 자원의 무엇이든되고 싶어

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!"; } 
     }); 
    } 
]); 

그런 다음 나중에 전화를 걸어 기사 서비스를 전달하십시오.

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 = { 
    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를 삽입 할 수와 routechangehandler 것 때문에 같은 시간에 당신은 당신의 경로에서 제목 속성을 설정 한 단순히 예상대로 작동합니다. 은 API 문서에서

: - {. 개체 =} -

해결 컨트롤러에 주입해야 종속성 옵션지도. 이러한 종속성 중 하나가 약속 인 경우 라우터는 컨트롤러가 인스턴스화되기 전에 모두 해결 될 때까지 대기하거나 하나가 거부 될 때까지 기다립니다. 모든 약속이 성공적으로 해결되면 해결 된 약속의 값이 주입되고 $ routeChangeSuccess 이벤트가 발생합니다.

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