[英]Attribute directive in AngularJS
我正在尝试创建一个属性指令,该指令将在输入字段之前插入标签。 从alert语句判断,html看起来正确。 但是,我没有正确编译或正确执行角度元素。 任何帮助将不胜感激。
小提琴是http://jsfiddle.net/2suL9/
这是JS代码。
var myApp = angular.module('myApp', []);
myApp.directive('makeLabel', function ($compile) {
return {
restrict: 'A',
replace: false,
link: function (scope, inputFld, attrs) {
var ForInput = attrs['name'];
var LabelSize = attrs['labelSize'];
var LabelText = attrs['makeLabel'];
var htmlStart = '<label for="' + ForInput + '" class="label-control ' + LabelSize + '">';
var htmlStar = '';
if (attrs['required'] ) {
htmlStar = '<span style="color:red">*</span>';
}
var htmlEnd = LabelText + ":</label> ";
var htmlTotal = htmlStart + htmlStar + htmlEnd;
alert(htmlTotal);
// Now add it before the input
var newLabel = angular.element(htmlTotal);
inputFld.prepend(($compile(htmlTotal)));
}
};
});
这是HTML
<!DOCTYPE html>
<html class="no-js" data-ng-app="myApp">
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<form name="TestLabelForm" class="form-horizontal">
<div class="form-group">
<input type="text" name="Simple" required="" make-label="Test Label" label-size="col-md-7" />
</div>
</form>
</div>
<br />
Should look like
<br />
<div class="row">
<form name="ExampleForm" class="form-horizontal">
<div class="form-group">
<label for="Simple2" class="col-md-7"><span style="color:red">*</span>Test Label:</label>
<input type="text" name="Simple2" required="" />
</div>
</form>
</div>
</div>
<!-- Get Javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"> </script>
<script src="js/TestLabelAttr.js"> </script>
</body>
</html>
您是否看到了抛出的DOM异常? 它找不到您创建的元素。 您必须使用document.createElement()
并通过$compile(scope)(newElement)
将新创建的元素引入$compile(scope)(newElement)
。 这是一个有效的工具: http : //jsfiddle.net/2suL9/26/请注意,我没有实现示例的if条件,必须添加它!
javascript部分如下所示:
var myApp = angular.module('myApp', []);
myApp.directive('makeLabel', function ($compile) {
return function (scope, inputFld, attrs) {
var el = inputFld[0];
var newEl = document.createElement("label");
newEl.setAttribute("for", attrs['name']);
newEl.setAttribute("class", "label-control");
var subEl = document.createElement("span");
subEl.setAttribute("style", "color:red");
subEl.innerHTML = "*";
var endText = document.createTextNode("Test Label:");
$compile(scope)(newEl);
$compile(scope)(subEl);
$compile(scope)(endText);
newEl.appendChild(subEl);
newEl.appendChild(endText);
inputFld.parent().prepend(newEl);
}
});
注意:在指令之外更改dom元素不是一个好习惯。 而是对标签使用另一个指令,该指令应显示在输入的前面。 您可以在控制器中集中逻辑,并在需要更改指令时使用广播通知指令。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.