写在最前面
ng-style 后面的表达式可以动态变化 ，但是我现在发现一个问题就是，默认加载了第一次的style之后，后期修改style 的名称之后，style名称已经发生改变，但是 样式还是首次加载时的样式 ，也就是 修改的style样式无法动态改变 ，这个很令我费解，所以写在这里，记录一下，或者有知道为什么的滴滴我。
为了解决这个问题，暂时不知道从ng-style本身何处入手，我换了另一种写法，也就是 ng-class，动态的改变class，这样ng-class后面动态改变class名，对应 页面上的样式 也会 立即响应 跟着变化。
不行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl as m">
<h1 ng-style="{{m.my}}">{{m.as}}</h1>
<button ng-click = "m.change()">ckckckc</button>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm = this;
vm.my="m.myObj";
vm.as = "131231";
vm.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
vm.myObj2 = {
"color" : "red",
"background-color" : "green",
"font-size" : "60px",
"padding" : "50px"
}
vm.change = function(){
console.log(vm.my)
vm.my="m.myObj2";
vm.as = "fffffffff";
console.log(vm.my)
}
});
</script>
</body>
</html>
也不行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl as m">
<h1 ng-style="{'background-color':{{m.color}}=='red'?'red':'green'}">菜鸟教程</h1>
<button ng-click="m.ck()">按钮</button>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm = this;
vm.color = "red";
vm.ck = function(){
console.log("1");
vm.color = "red";
}
});
</script>
</body>
</html>
不行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl as m">
<h1 ng-style="{'background-color':'{{m.color}}'}">菜鸟教程</h1>
<button ng-click="m.ck()">按钮</button>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm = this;
vm.color = "red";
vm.ck = function(){
console.log("1");
vm.color = "blue";
}
});
</script>
</body>
</html>
网友评论