如何使指令仅适用于某种类型的元素内容

时间:2015-10-06 01:03:51

标签: angularjs angularjs-directive

我想创建一个只匹配FALSE的指令。

任何时候编译都会找到这种类型的输入,我希望我的指令适用。我不想在元素中添加任何内容(额外的类或属性)。

这可能吗?我该怎么做?

SOLUTION:

为了后人,我包括我的solution



<input type="password"
&#13;
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');
              }
            });
          };
        }
      }
    };
  });
&#13;
.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;
}
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您可以尝试为type属性添加指令,只在元素为<input>type&#34;密码&#34; <时才执行链接功能/ em>的

.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演示,其中指令将&#34; red&#34; 类添加到元素〜http://plnkr.co/edit/EurHOzKiloE6B0QQSwAY?p=preview

答案 1 :(得分:0)

我会在<?php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST'); header("Access-Control-Allow-Headers: X-Requested-With"); $response = "Hmmm... Please contact the webmaster at contact@vahana.io as it seems that there is a problem with submitting this form. Error x02"; echo json_encode(['response' => $response]); ?> 上放置一个transclude指令,然后在编译transclude之前添加指令。

<body>

我没有测试过上面的内容,但它会是那样的。