CSS样式定位问题
问题描述：
我已经创建了一个AngularJs指令来清除输入字段。我想将“close”图标放置在相应的输入元素中。但它走出了输入领域。CSS样式定位问题
这里是plnkr - https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview
Note:请通过调整它检查plnkr预览。
答
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
\t return {
\t restrict: 'A',
\t scope: {
\t model: '=ngModel'
\t },
\t link: function(scope, element, attr) {
\t // Add wrapper to the element
\t scope.model = (scope.model == undefined) ? "" : scope.model;
\t element.wrap('<span class="wrapper"></span>')
\t .addClass('pr14')
\t .after('<span class="clear">×</span>');
\t var clearInputElement = angular.element(element.next());
\t clearInputElement.bind('click', function() {
\t scope.$apply(scope.model = "");
\t });
\t scope.$watch('model', function() {
\t if (scope.model.length > 0) {
\t clearInputElement.css("visibility", "visible");
\t } else {
\t clearInputElement.css("visibility", "hidden");
\t }
\t });
\t }
\t }
});.wrapper {
position: relative;
display: inline-block
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</body>
</html>
答
更改.wrapper类是这样的：
.wrapper {
position: relative;
display: inline-block;
}
答
由于输入标签不是容器标记，你需要用输入标签和结束标记在一个div。
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
\t return {
\t restrict: 'A',
\t scope: {
\t model: '=ngModel'
\t },
\t link: function(scope, element, attr) {
\t // Add wrapper to the element
\t scope.model = (scope.model == undefined) ? "" : scope.model;
\t element.wrap('<span class="wrapper"></span>')
\t .addClass('pr14')
\t .after('<span class="clear">×</span>');
\t var clearInputElement = angular.element(element.next());
\t clearInputElement.bind('click', function() {
\t scope.$apply(scope.model = "");
\t });
\t scope.$watch('model', function() {
\t if (scope.model.length > 0) {
\t clearInputElement.css("visibility", "visible");
\t } else {
\t clearInputElement.css("visibility", "hidden");
\t }
\t });
\t }
\t }
});.wrapper {
position: relative;
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
.wrap{position:relative;}<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<div class="wrap">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
</div>
<br>
<div class="wrap">
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</div>
</body>
</html>
如果检查通过做检查元素的代码，我已经没有把它包。但使用span标签，不使用div标签。我已经检查了用div替换，但没有工作 – Aparna
@Aparna请再次检查答案。你必须更多地解释你的问题！它正在工作。 –
对CSS不太好。任何方式感谢您的帮助。 – Aparna