Я создал одну директиву 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