AngularJS - 带插值的动态标题

Question

问题

我目前正在尝试找出一种在<title></title>更改时动态更改$route模板的方法。我已经看到了这样做的各种解决方案，包括$broadcast消息或将工厂传递给setTitle或其他类似的东西。我想如果我可以在$routeProvider级别定义它，但也允许它足够灵活，可以在$route的当前范围内使用变量。

我有什么

目前，我有一个使用$interpolate来实现我想要的工作解决方案;问题是，例如，如果在AJAX调用之后设置了属性，则模板不会更新。

routes.coffee

angular.module('app').config ['$routeProvider', ($routeProvider) ->
  $routeProvider
    .when '/',
      templateUrl: 'templates/home.html'
      controller: 'Home'
    .when '/person/:id'
      templateUrl: 'templates/person.html'
      controller: 'Person'
      title: '{{name}} ({{age}})'
]

lwTitle.coffee

angular.module('app').directive 'lwTitle', ['$route', '$interpolate', ($route, $interpolate) ->
  link: (scope, el) ->
    whenRouteScopeChanges = -> $route.current?.scope
    updateTitle = (routeScope) ->
      if routeScope
        title = $route.current?.$$route.title or 'Home'
        el.html $interpolate("#{title} - My App")(routeScope)

    scope.$watch whenRouteScopeChanges, updateTitle
]

再次，这是有效的;但是，例如，如果person上的age和routeScope属性（在/person/:id路由的情况下）仅在AJAX调用之后设置，我会得到一个空的他们的价值观的字符串。

有没有办法实现我正在寻找的东西？我真的想动态设置<title></title>元素的模板，并在路由发生变化时告诉它routeScope的范围。

提前致谢。

Answer 1

您应该在路线上使用resolve property - 然后首先您的ajax呼叫将检索数据，然后将填充路线。

  

route.resolve - 可选的地图   应该注入控制器的依赖项。

它看起来像这样

 //normal javascript
  $routeProvider.when('/', {
  templateUrl: 'templates/home.html'
  resolve:{
    promiseObject:  function($http){
            return $http({method: 'GET', url: '/someUrl'})
            .then (function (data) {
              return doSomeStuffFirst(data);
             });
    }
}});