Question

我创建了一个AngularJs指令来清除输入字段。我希望将“close”图标放在相应的输入元素中。但它走出输入领域。

这是plnkr - https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview

Note:请通过调整大小来检查plnkr预览。

Answer 1

由于输入标签不是容器标签，因此需要在div中包装输入标签和关闭标签。

＆＃13;

var app = angular.module("myApp", []);

app.controller("MyController", function($scope) {
    $scope.fname = "Hello!!"
    $scope.lname = "World";
 })
.directive('clearField', function($compile) {
	return {
	  restrict: 'A',
	  scope: {
	    model: '=ngModel'
	  },
	  link: function(scope, element, attr) {
	    // Add wrapper to the element
	    scope.model = (scope.model == undefined) ? "" : scope.model;

	    element.wrap('<span class="wrapper"></span>')
	    .addClass('pr14')
	    .after('<span class="clear">×</span>');

	    var clearInputElement = angular.element(element.next());

	    clearInputElement.bind('click', function() {
	      scope.$apply(scope.model = "");
	    });

	    scope.$watch('model', function() {
	      if (scope.model.length > 0) {
	        clearInputElement.css("visibility", "visible");
	      } else {
	        clearInputElement.css("visibility", "hidden");
	      }
	    });
	  }
	}
});

＆＃13;

.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;}

＆＃13;

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script data-require="angularjs@1.5.8" 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>

＆＃13;

Answer 2

＆＃13;

var app = angular.module("myApp", []);

app.controller("MyController", function($scope) {
    $scope.fname = "Hello!!"
    $scope.lname = "World";
 })
.directive('clearField', function($compile) {
	return {
	  restrict: 'A',
	  scope: {
	    model: '=ngModel'
	  },
	  link: function(scope, element, attr) {
	    // Add wrapper to the element
	    scope.model = (scope.model == undefined) ? "" : scope.model;

	    element.wrap('<span class="wrapper"></span>')
	    .addClass('pr14')
	    .after('<span class="clear">×</span>');

	    var clearInputElement = angular.element(element.next());

	    clearInputElement.bind('click', function() {
	      scope.$apply(scope.model = "");
	    });

	    scope.$watch('model', function() {
	      if (scope.model.length > 0) {
	        clearInputElement.css("visibility", "visible");
	      } else {
	        clearInputElement.css("visibility", "hidden");
	      }
	    });
	  }
	}
});

＆＃13;

.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;
}

＆＃13;

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script data-require="angularjs@1.5.8" 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>

＆＃13;

Answer 3

像这样更改您的.wrapper课程：

.wrapper {
  position: relative;
  display: inline-block;
}

CSS样式定位问题

3 个答案: