門禁控制器數據

我有一個路由器和一堆控制器的角度應用程式，例如門禁控制器數據

articleApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/articles', { 
     templateUrl: 'templates/articles/index.html' 
     }). 
     when('/articles/:articleId', { 
     templateUrl: 'templates/articles/article.html' 
     }). 
     otherwise({ 
     redirectTo: '/articles' 
     }); 
    }]);

的控制器組織在模板中給出，例如，

<div ng-controller="ArticleCtrl"> 
    <!-- [...] --> 
</div>

現在，我想根據路線和頁面內容設置<head>數據，如頁面標題，meta數據等。數據顯然在控制器中，因此我現在正在設置<head>數據。

不幸的是，這變得相當混亂：這裏的一個控制器，一個控制器，可能在同一個視圖中激活，這個設置頁面標題，一個設置頁面標題...一個調試迷宮。

理想情況下，我想只在一個地方設置元數據，上面的$routeProvider對我來說似乎很理想。不幸的是，我們沒有訪問控制器的數據。或者我們呢？

是否可以從$routeProvider訪問控制器數據？

來源

2015-10-15 Nico Schlömer

這樣定義

<title>{{ PageSettings.title() }}</title>

在標題標籤的變量然後添加一個服務於它

myModule.factory('PageSettings', function() { 
    var title = 'default'; 
    return { 
    title: function() { return title; }, 
    setTitle: function(newTitle) { title = newTitle } 
    }; 
});

在你的路線配置，添加標題

articleApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/articles', { 
     templateUrl: 'templates/articles/index.html', 
     title: 'Articles' 
     }). 
     when('/articles/:articleId', { 
     templateUrl: 'templates/articles/article.html', 
     title: 'Article' 
     }). 
     otherwise({ 
     redirectTo: '/articles' 
     }); 
    }]);

然後，你可以寫你的控制器像這樣

function MainCtrl($scope, $route, PageSettings) { 
    PageSettings.setTitle($route.current.title); 
}

來源

2015-10-15 20:00:16 Meeh

感謝@Meeh這個想法。我不明白這是如何解決問題的。我仍然將所有'setTitles'分散在控制器中，而我更願意從'$ routeProvider'中調用'setTitle'。 –

如果你必須使用更多的信息，頁面像

標題
元數據
關鍵詞
說明
，還有更多

那麼我會建議使用angularjs-viewhead

如果只有一個或兩個信息，那麼你可以設置它們在路由和改變路線時，你可以設置它。

見我如何通過上變更路徑

app.run(['$rootScope', '$state', function ($rootScope, $state) { 
$rootScope.$on('$stateChangeStart', function (event, next) { 

    // Page Title 
    $rootScope.title = next.title; 
});

使用 ui-router

.state('permission', { 
    title: 'Permission', 
    url: '/permission', 
    templateUrl: 'app/views/permission.html', 
    controller: 'permissionCtrl', 
    data: { 
     Roles: [Constants.Roles.admin, Constants.Roles.analyst] 
    } 
}) 
.state('products', { 
    title: 'products Page', 
    url: '/products', 
    templateUrl: 'app/views/products.html' 
});

一種實現它

}]）;

在HTML中

<title ng-bind="title"></title>

來源

2015-10-15 20:07:38

如何設置路由？我需要來自相應控制器的信息來設置，例如頁面標題。如何訪問'$ routeProvider'中的控制器數據？ –

我認爲你處理這個問題的錯誤的方式。如果這個數據需要以上的控制器的範圍，應該在解決之前控制器的實例化。然後，您將以與注入任何組件相同的方式將此數據注入控制器。

尤其請參閱documentation的resolve財產$routeProvider。

下面是一個例子：

$routeProvider 
    .when('/phone/:phoneId', { 
     controller: 'PhoneDetailController', 
     templateUrl: 'phone.detail.html', 
     resolve: { 
      routeMetadata: function() { 
       return { 
        title: 'Phone product page', 
        keywords: ['phone', 'mobile', 'cellular'] 
       } 
      } 
     } 
    });

在控制器，你只需要注入routeMetadata：

app.controller('PhoneDetailController', function (..., routeMetadata, ...) { 
    // ... 
}

除了resolve財產，如果你需要獲取從數據這是特別有用的api，還可以使用技巧：在路由定義的頂層定義數據：

$routeProvider 
    .when('/phone/:phoneId', { 
     controller: 'PhoneDetailController', 
     templateUrl: 'phone.detail.html', 
     routeMetadata: { 
      title: 'Phone product page', 
      keywords: ['phone', 'mobile', 'cellular'] 
     } 
    });

此數據可在$route.current訪問。雖然我寫這個，我寧願去與resolve財產。後者更多是一種解決方法，因爲模塊ngRoute和自定義屬性定義的屬性之間的差異並不明顯。

來源

2015-10-15 20:16:02

不錯的主意，謝謝。 –

不客氣。我添加了一些示例代碼，可能對某人有用。 –

我也可以從'$ route.current'訪問'resolve'd數據嗎？ –

門禁控制器數據

回答

相關問題