聲明AngularJS1指令爲大寫文本存在的元素

Question

我需要創建一個大寫的ELEM

<div>Hello World!</div> 

所有內容的信與另外全大寫的

<div all-uppercase>HELLO WORLD!</div> 

我的任務是一個指令請注意Angular如何通過「指令」提供操縱現有html文本的能力

請發佈工作代碼...

Answer 1

儘管通過說css規則text-transform: uppercase可以通過CSS直接輕鬆完成。

指令版本如下所示。在通過link函數訪問元素文本的位置，使其大寫&將其放回到元素的文本中。

指令

.directive('allUppercase', function(){ 
    return { 
    restrict: 'A', 
    link: function(scope, element){ 
     element.text(element.text().toUpperCase()); 
    } 
    } 
}); 

同樣的事情可以通過使用角度內置過濾器稱爲uppercase

{{ 'Hello World!'| uppercase }} 

Demo Of All 3