更改 AngularJS 属性会更改 HTML 属性的值
Posted
技术标签:
【中文标题】更改 AngularJS 属性会更改 HTML 属性的值【英文标题】：Changing AngularJS Property changes value of an HTML attribute 【发布时间】：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 属性的值。
【问题讨论】：
【参考方案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 的默认“”标签。并且更改控制器代码并没有解决我的问题。以上是关于更改 AngularJS 属性会更改 HTML 属性的值的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 AngularJS 指令更改 $templateCache 中的属性