更改 AngularJS 属性会更改 HTML 属性的值答案

【问题标题】：Changing AngularJS Property changes value of an HTML attribute更改 AngularJS 属性会更改 HTML 属性的值
【发布时间】：2021-11-24 20:52:36
【问题描述】：

我有一个带有代码的 base.html 页面

<html lang="en" data-ng-app="MyApp" data-ng-controller="MyController">
<body style="background-color: [[ BackgroundPrimaryColor ]]">
.
.
.
{{ block content }}
{{ endblock }}
.
.
.
</body>
<script>
// Creating an AngularJS Module for our AngularJS Application
var app=angular.module("MyApp",[]);

// Changing syntax for AngularJS Expression
app.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

// Defining AngularJS Controller for our AngularJS Application
app.controller("MyController",function($scope){
    // Defining AngularJS Application Property to specify Mode of the Website
    $scope.DarkMode=false;

    // Defining function to change Mode of the Website
    $scope.changeDarkLightMode=function(){
        // Changing other values
        if ($scope.DarkMode){
            $scope.BackgroundPrimaryColor="black";
        }
        else{
            $scope.BackgroundPrimaryColor="white";
        }

        // Changing value of the property DarkMode
        $scope.DarkMode=!$scope.DarkMode;

    };
    
    // Calling changeDarkLightMode() whenever page loads
    $scope.changeDarkLightMode();

});
</script>
</html>

我有另一个名称为 contact me.html 的页面

{{ block content }}
<body onload="onLoad()">
.
.
.
</body>
<script>
function onLoad(){
 document.getElementsbyTagName("body")[0].setAttribute("style","background-repeat: no-repeat;background-attachment: scroll;background-image: url({% static 'Contact_Me_Image.png' %});background-size:cover;background-position: 0% 20%;");}
</script>
{{ endblock }}

所以 contact me.html 页面构成 base.html 的一部分。

在 contact me.html 页面中，我从 <script> 标记设置 body 的 style 属性，以便 body 更改为

<body style="background-color: [[ BackgroundPrimaryColor ]]">
...
</body>

到

<body style="background-repeat: no-repeat;background-attachment: scroll;background-image: url({% static 'Contact_Me_Image.png' %});background-size:cover;background-position: 0% 20%;">
...
</body>

在我更改 AngularJS 属性 BackgroundPrimaryColor 的值之前，一切正常。只要我更改 AngularJS 属性 BackgroundPrimaryColor 的值，body 就会再次从

<body style="background-repeat: no-repeat;background-attachment: scroll;background-image: url({% static 'Contact_Me_Image.png' %});background-size:cover;background-position: 0% 20%;">
...
</body>

到

<body style="background-color: [[ BackgroundPrimaryColor ]]">
...
</body>

那么任何人都可以说出为什么更改 AngularJS 属性 BackgroundPrimaryColor 的值会更改 body 的 style 属性的值。

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

请去掉自定义 "[[" 插值，这可以通过使用 "{{" 默认标签实现

<body style="background-color: {{BackgroundPrimaryColor}}">
...
</body>

在控制器中使用这个

app.controller("MyController",function($scope){

$scope.BackgroundPrimaryColor="#FFF";

$scope.init=function(){
    $scope.BackgroundPrimaryColor="red";
}

$scope.init();

});

【讨论】：

实际上我在后端使用 Django，所以我没有使用 AngularJS 的默认“{{”标签。并且更改控制器代码并没有解决我的问题。