Question

我是angular.js的新手。我正在尝试创建一个指令，在html文档的<head>部分添加一些标题和元标记，但我遇到了一些麻烦。

我的index.html文件如下：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <seo-title></seo-title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
    <script src="/incl/js/myApp.js"></script>
</head>
<body >
    <div ng-view></div>
</body>
</html>

我的javascript是：

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

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider
        .when('/', { templateUrl: 'routes/home.html'})
        .when('/pageA', { templateUrl: 'routes/pageA.html'})
        .when('/pageB', { templateUrl: 'routes/pageB.html'})
        .otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode({
        enabled: true
    });

}]);

app.directive('seoTitle', function() {
    return {
        restrict: 'E',
        template: '<title>{{seo.title}}</title>'
    };
});

当我打开检查器时，该指令已移至<body>并且尚未替换为模板：

enter image description here

如何在标题中创建指令？

P.S。：代码示例会很棒！

Answer 1

您的指令无需进入head即可设置标题。只需让您的指令注入$window并设置$window.document.title = 'your title'。

更新以下是更新元标记的方法。

为了更新元标记，我会使用这样的指令：

mmMetaTags.$inject = ['metaTags'];
function mmMetaTags(metaTags) {

    return {
        restrict: 'A',
        link: function(scope, element) {

            metaTags.metaTags.forEach(function(tag) {
                addMetaTag(tag.name, tag.content)
            });

            metaTags.subscribe(addMetaTag);

            function addMetaTag(name, content) {

                var tag = element[0].querySelector('meta[name="' + name + '"]'); 

                if (tag) {

                    tag.setAttribute('content', content);
                } else {

                    element.append('<meta name="' + name + '" content="' + content + '">');
                }
            }
        }
    }

}

directive('mmMetaTags', mmMetaTags);

除了设置metaTags的服务：

function MetaTags() {

    // private
    this._tags = [];

    // private
    this._subscriber;

    var self = this;
    Object.defineProperty(this, 'metaTags', { get: function() {
        return self._tags;
     }});
}

MetaTags.prototype.addMetaTag = function(name, content) {
    this._tags.push({ name: name, content: content });
    this._updateSubscriber(name, content);
}

MetaTags.prototype.subscribe = function(callback) {
    if (!this.subscriber) {
        this._subscriber = callback;
    } else {
        throw new Error('Subscriber already attached. Only one subscriber may be added as there can only be one instance of <head>');
    }
}

// private
MetaTags.prototype._updateSubscriber = function(name, content) {
    this.subscriber(name, content);    
}

service('metaTags', MetaTags);

因此，在head标记中，您将包含属性mm-meta-tags。然后在您的控制器中，您将注入metaTags服务并调用addMetaTag来更新标记。

Answer 2

您的答案就在这里：Set Page title using UI-Router，在您的代码中实现：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <title seo-title>doesn't work</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
    <script src="/incl/js/myApp.js"></script>
</head>
<body >
    <div ng-view></div>
</body>
</html>

你js：

app.directive('seoTitle', function() {
return {
    restrict: 'a',
    template: 'works'
};

你只需要添加一个控制器或一些逻辑来设置你想要的标题

Answer 3

首先要做的事情是：我正在看检查员，是的，不知何故，标题标签出现在身体内。但它似乎不会影响其功能。

现在解决方案：乍一看似乎只有 replace: true指令的声明中缺少seoTitle。添加它可以解决问题，并且seo-title已按计划用title标记替换，但Angular会在创建新范围时将内容包装在其他span元素中（即使范围为seoTag被声明为隔离scope: {}）。

我想出了以下解决方案：

app.directive('seoTitle', function() {

    function compile(elem, attrs, transclude) {

        return function ($scope) {
            transclude($scope, function (clone) {
                elem.empty();
                elem.append(clone[0].innerText);
            });
        };
    }

    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {},
        compile: compile,
        template: '<title ng-transclude></title>',
    };

});

用法：

<seo-title>My Title</seo-title>

如前所述，使用replace: true您可以删除包装seo-title标记。

为了删除额外创建的span元素，我提供compile函数返回postLink函数。

我无法解释，为什么我需要在transclude函数中使用postLink函数。这似乎是一个非常普遍的问题，在这种情况下，Angular会创建一个额外的span元素。稍微尝试和错误我发现摆脱span的最简单方法是emtpy()元素并仅附加innerText。

Answer 4

您可以尝试使用metang库。除了标题之外，它还支持其他元标记（描述，作者，og：，twitter：等）

Answer 5

    angular.directive('ngHead', function () {
    let strHtml = '';
    strHtml += '<meta charset="utf-8">';
    strHtml += '<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">';
    strHtml += '<meta http-equiv="x-ua-compatible" content="ie=edge">';
    strHtml += '<meta name="google" content="notranslate" />';
    strHtml += '<title>';
    strHtml += '    title';
    strHtml += '</title>';
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.append(strHtml);
        }
    }
});

在你的 html <head ng-head></head> 为我工作。

如何在文档部分创建Angular指令？

5 个答案: