头标签动态填充 Angular

Question

我想知道是否可以使用 Angular 动态更改某些 HEAD 标签的值。一个例子就是这种转换：

<meta name="theme-color" content="#2F7DCA">

至：

<meta name="theme-color" content="{{ color }}">

这是理论，但我想知道是否有人尝试过它并且有效，或者如果不是这样，如何去做。我现在无法对其进行测试，但我需要在开始编码之前了解它。如果可以的话，我会很感激一些如何操作其他 HEAD 标签的例子。

Answer 1

您可以使用 ng-bind 属性来执行此操作（大括号可能会破坏您在首次加载页面时用于应用颜色的代码）。
看看这个 post：How to dynamically change header based on AngularJS partial view?
他们将其用于标题，但您也可以将其用于 meta 标签。

Answer 2

是的，是的。

/**** ONE controller ****/
$scope.color = 'red';   

/**** Global ****/
$rootScope.color = 'red';
$scope.$root.color = 'red';

Answer 3

你可以这样做，但前提是 meta 在你的 ng-app 范围内，所以像这样：

<html ng-app="myApp">
<head ng-controller="headCtrl">
    <meta name="theme-color" content="{{ color }}">
</head>
<body>
    <!-- ... -->
    <script>
        angular.module("myApp", [])
            .controller("headCtrl", function($scope) {
                $scope.color = "#2F7DCA";
            });
    </script>
</body>
</html>

头标签动态填充 Angular

Head tags filled up dynamically with Angular

javascript

meta

angularjs

angularjs-bindings