Question

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

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

为：

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

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

Answer 1

您可以使用ng-bind属性执行此操作（花括号可能会破坏您在首次加载页面时应用颜色所使用的代码。）
看看这篇文章：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动态填充

3 个答案: