Head-Tags dynamisch gefüllt mit Angular

Ich würde gerne wissen, ob es möglich ist, die Werte einiger HEAD-Tags dynamisch mit Angular zu ändern. Ein Beispiel wäre diese Transformation sein:Head-Tags dynamisch gefüllt mit Angular

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

zu:

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

Das ist die Theorie, aber ich würde gerne wissen, ob jemand versucht hat und es funktioniert, oder ob dies nicht der richtige Weg, wie es geht. Ich kann es jetzt nicht testen, aber ich muss es wissen, bevor ich mit dem Code anfangen kann. Wenn es möglich ist, es zu tun, würde ich mich über einige Beispiele freuen, wie man andere HEAD-Tags manipuliert.

Quelle

2016-06-17 miquelarranz

Sie können dazu das Attribut ng-bind verwenden (die geschweiften Klammern können den Code beschädigen, den Sie zum Anwenden der Farbe beim ersten Laden der Seite verwenden).
Werfen Sie einen Blick auf diesen Beitrag: How to dynamically change header based on AngularJS partial view?
Sie verwenden es für den Titel, aber Sie können dies auch für meta Tags verwenden.

Quelle

2016-06-17 13:09:10

Ja, ist es.

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

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

Quelle

2016-06-17 13:09:21 nemonake

Sie können dies tun, aber nur, wenn der meta ist in Umfang Ihrer ng-app, so etwas wie dieses:

<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>

Quelle

2016-06-17 13:12:32 devqon

Antwort

Verwandte Themen