如何使指令僅適用於特定類型的元素內容

我想創建一個只與<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>

來源

2015-10-06 toddmo

問題是，Angular已經提供了一個''指令。我想你可以添加一個'type'屬性指令並檢查'pre'鏈接函數中的元素類型 – Phil

是的，或者即時編譯所有匹配元素，就像使用jq'$（'input [type =「password」 ]'）。each（/ * add指令屬性和$編譯它* /）'但是這是一個壞主意，爲什麼你會這樣做，而不是寫一個指令？ – floribon

'$ compile（$（'input [type =「password」]'）。attr（'mydirective'，true））（scope）' – cgTag

你可以嘗試添加指令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

來源

2015-10-06 02:44:07 Phil

謝謝菲爾！我可以看到這將如何工作。我會給它一個表演，讓你知道！我正在寫一個CAPS LOCK圖標以顯示在密碼框中。很酷，如果我能得到它的工作。 – toddmo

查看我的編輯到我的問題。我感謝你能夠幫助我做的事情，而且非常酷！ – toddmo

我會放在<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); 
      }); 
     } 
    } 
}

我沒有測試過上述內容，但它會是這樣的。

來源

2015-10-06 02:33:22 cgTag

請注意，這將需要jQuery（jqLite不支持除元素類型選擇器以外的其他任何東西） – Phil

我很習慣使用jQuery。我認爲這可能會起作用，如果你沒有jQuery。 'cloned.querySelector（'input [type =「password」]'）。setAttribute（'newDirective'，true）;' – cgTag

你可能不得不使用'angular.forEach'，但你明白了。 – cgTag

如何使指令僅適用於特定類型的元素內容

回答

相關問題