将 AngularJS 1 指令声明为大写文本到现有元素中

Question

我需要创建一个指令，将元素内容的所有字母大写

<div>Hello World!</div>

加上全大写

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

我的任务是了解 Angular 如何能够通过 "directive"

提供将文本操作到现有 html 中的能力

请post工作代码...

Answer 1

虽然这可以通过 CSS 直接通过 css 规则 text-transform: uppercase.

轻松完成

指令版本如下。在通过 link 函数访问元素文本的位置，将其设为大写并将其放回元素的文本中。

指令

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

通过使用名为 uppercase

的内置过滤器 angular 也可以实现同样的效果

{{ 'Hello World!'| uppercase }}

Demo Of All 3

将 AngularJS 1 指令声明为大写文本到现有元素中

Declare AngularJS1 directive to uppercase text into existent element

angularjs

angular-directive

angular-directive-link