AngularJS - 用插值

Question

問題

我目前試圖找出一種方法來動態地改變0​​模板時$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 
] 

同樣，該工程;但是，例如，如果僅在AJAX調用後設置routeScope上的person和age屬性（在/person/:id路由的情況下），則會爲其值創建一個空字符串。

有沒有辦法實現我在找的東西？我真的想動態地設置<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); 
      }); 
    } 
}});