[译] 如何使用 TypeScript 编写自定义 AngularJS 指令?
AngularJS 框架有很多强大的特性,其中指令(Directives)是广为人知的。在这篇文章中,我将告诉你如何用 TypeScript 编写自定义 AngularJS 指令。首先,我将讲一下关于指令的基本知识,但如果你想直接看 TypeScript 代码的,你可以跳过基本。 什么是指令?
例子看看 <div ng-controller="Controller"> Hello <input ng-model='name'> <hr/> <span data-ng-bind="name"></span> <br/> <span ng:bind="name"></span> <br/> <span ng_bind="name"></span> <br/> <span data-ng-bind="name"></span> <br/> <span x-ng-bind="name"></span> <br/> </div> 标准化过程上面的代码片段,有多种方式去标记一个指令。AngularJS 的 HTML 编译器负责决定哪个元素匹配哪个指令,一般通过区分大小写的 标准化过程如下:
最佳实践最好使用 短横线-分隔 格式(如 指令的类型AngularJS 的 HTML 编译器如 <my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span> 最佳实践最好通过标签名或者属性而不是注释和类名去使用指令。这样做通常会更容易去决定哪个指令匹配给定的元素。 注释指令通常在 DOM API 限制跨越多个元素创建指令的地方使用(如 TypeScript 中的自定义指令让我们来创建一个只为任何的块,小部件或者人名在右边添加标题,子标题和文本的指令。这是一个很好的例子,因为它可以在很多地方重用而且可以作为一个有隔离作用域的指令在每个动态加载的块中作为信息展示。 来看看 HTML,Typescript 的代码在其下方: <div class="widget-head"> <div class="page-title pull-left">{{title}}</div> <small class="page-title-subtle" ng-show="subtitle">({{subtitle}})</small> <div class="widget-icons pull-right"></div> <small class="pull-right page-title-subtle" ng-show="rightText">{{rightText}}</small> <div class="clearfix"></div> </div> interface IHtWidgetHeaderScope { title: string; subtitle: string; rightText: string; allowCollapse: string; } //Usage: //<div ht-widget-header title="vm.map.title"></div> // Creates: // <div ht-widget-header="" // title="Movie" //</div> class HtWidgetHeader implements ng.IDirective { static $inject: Array<string> = ['']; constructor() { } static instance(): ng.IDirective { return new HtWidgetHeader(); } scope: IHtWidgetHeaderScope = { 'title': '@','subtitle': '@','rightText': '@' }; templateUrl: string = 'app/widgets/widget-header.html'; restrict: string = 'EA'; } angular.module('app').directive('htWidgetHeader',HtWidgetHeader.instance); 利用 TypeScript 的特点,创建一个定义了可在指令内使用的作用域成员的接口(interface)。同样地我们想创建一个指令的实例,我们就定义一个实现了 要想知道类型定义,看看这个令人吃惊的仓库,它收集了几乎所有流行的 JavaScript 库。这些类型定义可以让我们得到任何编译时错误和 IDE 的智能支持。我使用 Visual Studio 和 Visual Code,它们都对 TypeScript 有很好的支持。 这个指令不需要任何内建的 angular 服务或任何依赖,所以 构造器(constructor)不用做什么事情但我们还是需要一个静态的 这个类的
这些限制只要需要都可以结合:'AEC' 匹配属性或元素或类名。 现在可以像下面的代码片段那样使用这个指令: <div ht-widget-header title="{{vm.title}}" subtitle="{{vm.description}}" right-text="{{vm.refreshedDateTimeInfo}}"></div> 这个指令可以在给到一个硬编码或者动态的
如果你想学到更多有关如何整合 AngularJS 和 TypeScript 的知识,可以看看我的 AngularJS 文章。如果你想学习其他一些特别的东西可以联系我,我会尝试写相关文章的。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |