javascript - AngularJS 指令读取当前 templateURL

Question

我在 Controller 中编写了一些逻辑来插入我的应用程序元数据:

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'
    };

}]);

上面的方法工作正常，但是，我可以编写一个指令，而不是在每个 Controller 中编写 SEO 值吗？指令可以确定当前路线是什么吗？

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

Answer 1

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

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

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

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

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