如何使指令仅适用于特定类型的元素内容
问题描述:
我想创建一个只与<input type="password"
匹配的指令。如何使指令仅适用于特定类型的元素内容
任何时候编译发现这种类型的输入,我希望我的指令适用。我不想添加任何东西到元素(一个额外的类或属性)。
这可能吗?我该怎么做?
SOLUTION:
为后人的缘故,我包括我的solution:
angular.module('controls', [])
.directive('type',
function() {
return {
restrict: 'A',
compile: function(element, attributes) {
if (element.prop('nodeName') === 'INPUT' && attributes.type === 'password') {
return function link(scope, element, attributes, controller) {
element.on('keypress', function(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
element.addClass('capslock');
} else {
element.removeClass('capslock');
}
});
};
}
}
};
});
.capslock {
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAKUSURBVEhLrVbLahRBFK3ErhoNuHIlghsRBBE3vlAzVZMEN7pwoQtX6jcIKhiIuBAXfoCPlVs3IrhQEQSVBIIg+A5MvyaOqKjJqKC4Gc9tq6Wn+trdM5kDB4a+557TXXWre0QZukKMthpePdLycmTUo1DLdqRVhxga2Q6Neky1wHiatLatf9w8KlYFRh5HwAKCutUoF2ItT3TRa22qYbGuNsNgLm9YmfOhVlusXTFiXZvCci0zJv2yE4zXDlhbHpGpTSLsF9M8KH/6eABr34u4UdsEwZLTwBKDch03doWrucTSLjexRTbmL7ozYhSFJ1yDSwrDNI4Q0XOV0zCcowwbJwQm8RgjypHCZjKjT8cg1F6lUGScTJtGcOG5K3AZG3UtG5aCQnEOy5dXy7eUJfy6t5MVZPi/sBRVQ33t7ccxkOe5YsqysBSkKQ+VFwVEd/lifs/KkGxPQSj28QENTJMvqhv9hKWg0OTYcJ5GBgLFL2xRy0vvJsW6N3vF2vYhMfZQC8965kA10pD2NXrQf9r1IyLrK55QfeaKLgOjzlj/HGB0iutxmQRizSt9DYYTKH3awztc0eWQAu/jCdU0V3Q5jMDYyAsiaMjtXJHhygO1t4P09BJ+ygmyhOm5xJ0BPT3XkyU0z6xciJZWhzlRlrTX+OugbMs/vMQ1DN5trqeHWh2xLekLXN5jhb38jdX4gaf9nhC/6ZqjyZHeMMmLO4vWxJoNuNMPXMPKKD/6+1ZvtDG98Ce8XRB18k2DEavwDd/LPdaeRwufK5yX95xBX8RqLRpvt7UtRjQ+tr7qC4EjHXDaImtXHWg+CM5mzYqIJZynibftgyNuyK2YyLM0/rj7VzD/ZAfsBYbiVoxasy63WXkBhPgDAANrgFGFYP4AAAAASUVORK5CYII=) no-repeat right -10px center;
background-size: 16px 16px;
background-position: right 5px center;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='controls'>
Type into second box with caps on or off and see what happens!
<br/>
<input type="text" />
<input type="password" id="search-box" ng-model="searchString" placeholder="text search" />
<p>{{searchString}}</p>
<div></div>
</body>
答
你可以尝试添加指令type
属性和唯一执行的逻辑函数,如果该元素是<input>
和type
是“密码”
.directive('type', function() {
return {
restrict: 'A',
compile: function(tElement, tAttrs) {
if (tElement.prop('nodeName') === 'INPUT' && tAttrs.type === 'password') {
return function postLink(scope, iElement, iAttrs, controller) {
// etc
};
}
}
};
})
Plunker演示,其中指令增加了“红”类元素〜http://plnkr.co/edit/EurHOzKiloE6B0QQSwAY?p=preview
答
我会放在<body>
一个transclude指令,然后前添加指令编译了transclude。
angular.directive('body',function() {
return {
restrict: 'E',
transclude: true,
link: function(scope,el,attr,ctrl,transcludeFn) {
transcludeFn(function(cloned){
cloned.find('input[type="password"]').attr('newDirective',true);
el.append(cloned);
});
}
}
}
我没有测试过上述内容,但它会是这样的。
问题是,Angular已经提供了一个''指令。我想你可以添加一个'type'属性指令并检查'pre'链接函数中的元素类型 – Phil
是的,或者即时编译所有匹配元素,就像使用jq'$('input [type =“password” ]')。each(/ * add指令属性和$编译它* /)'但是这是一个坏主意,为什么你会这样做,而不是写一个指令? – floribon
'$ compile($('input [type =“password”]')。attr('mydirective',true))(scope)' – cgTag