如何使用指令添加CSS样式？
[英]How can I add css styles using directives?
问题描述
我试图使用指令动态添加一些css样式，但是我却尝试了一些缺少的样式。
这是我的html代码：
<header-image image="{{BackgroundImage}}"></header-image>
这是我的指令和控制器：
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.BackgroundImage = "http://whatatimeline.com/covers/fb_profile_cover_13173327520f7.jpg";
});
app.directive('headerImage', function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'backImage.html',
link: function (scope, elem, attr) {
console.log("coming to directive");
scope.backImage = attr.image;
console.log(scope.backImage);
elem.css({
width: '100%',
})
}
}
});
这是我的backImage.html：
<div>
<img ng-src="{{backImage}}" alt="BackImage">
</div>
当我像上面一样尝试时，正在为整个div添加样式，如下图
但是我想使用指令elem.css()添加如下图所示的样式
我正在尝试通过elem.css({})添加css样式，但是如果图像标签只需要图像标签的样式，它将附加到div上，而且我也必须从指令中设置img标签的样式，例如编写elem.css()则这些样式仅对img标签附加。
提前致谢。
4 个解决方案
解决方案1
2 2016-07-25 07:23:36
另外，您可以像这样做CSS：
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Welcome</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
</script>
</body>
希望对你有帮助。
解决方案2
1 已采纳 2016-07-25 07:18:41
您必须使用.find() ：
elem.find('img').css({
width: '100%',
});
因为elem是指令元素。 因此，您必须找到它的子元素。
Angular确实使用内置的jQuery方法，并且.find()有一个限制，即只能通过其标记名来查找元素。
解决方案3
0 2016-07-25 07:19:05
你可以做：
elem.find('img').css({
width: '100%',
})
或者只是创建一个CSS文件：
tb-header-image img {
width: 100%;
}
您无需在链接函数中一再设置img的样式。
解决方案4
0 2016-07-25 07:34:34
我认为您应该对指令使用“ ngClass”。
如何将自己的CSS样式添加到CKEditor
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.