Question

我在控制器中编写了一些逻辑来插入我的应用元数据：

HTML：

html ng-app="myApp" ng-controller="MainController"

meta name="description" content="{{ seo.metaDescription }}"

JS：

var app = angular.module('myApp', ['ngRoute']);

app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){
    $routeProvider
        .when("/", {
            templateUrl: "page1.html",
            controller: "Page1Controller"
        })
        .when("/ledlighting", {
            templateUrl: "page2.html",
            controller: "Page2Controller"
        })
        // .otherwise({ redirectTo: '/'})
        ;
}]);
app.controller('MainController', ["$scope", function($scope) {

    $scope.seo = { 
        metaDescription : ''
    }; 

}]);
app.controller('Page1Controller', ["$scope", function($scope) {

    console.log("Greetings from controller 1");

    $scope.$parent.seo = { 
        metaDescription: 'My SEO Meta Description'
    };

}]);

上述工作正常，但是，不是必须在每个控制器中写入SEO值，我可以写一个指令吗？指令可以确定当前路由是什么/什么？

基本上我想用指令替换我的元标记，并根据当前路由插入内容/描述。

Answer 1

而不是指令我会建议更简单的方法：直接读取路由配置seo信息。

为此，您需要在路由配置中存储seo数据：

$routeProvider
    .when("/", {
        templateUrl: "page1.html",
        controller: "Page1Controller",
        seo: {
            metaDescription: "My SEO Meta Description"
        }
    })

然后在您的应用程序的运行块中，您可以添加$routeChangeSuccess事件侦听器，该侦听器将根据当前$rootScope.seo设置$route：

app.run(['$rootScope', '$route', function($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
        if (oldVal !== newVal) {
            $rootScope.seo = $route.current.seo;
        }
    });
}]);

演示： http://plnkr.co/edit/fzm6FknfOO8I6vdAO39g?p=preview

AngularJS指令读取当前templateURL

1 个答案: