angularjs - 将 AngularJS1 指令声明为将大写文本转换为现有元素

Question

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

<div>Hello World!</div>

加上全大写

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

我的任务是了解 Angular 如何提供通过“指令”将文本操作到现有 html 的能力

请发布工作代码...

Answer 1

虽然这可以很容易地通过 CSS 直接通过说 css rule 来完成text-transform: uppercase。

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

指示

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

同样的事情可以通过使用内置的角度过滤器来实现uppercase

{{ 'Hello World!'| uppercase }}

所有 3 的演示