angular1.5组件与旧指令 – 哪里是链接function？

我一直在阅读这篇关于Angular 1.5中的新的.component()助手的最新文章 ，这本来是为了帮​​助大家最终迁移到Angular 2。 一切看起来不错，简单，但我找不到有关组件内的DOM操作的任何信息。

有一个template属性，它可以是一个函数，接受$element和$attrs参数。 我还不清楚这是否是linkfunction的替代品。 这似乎并不如此。

编辑2/2/16： 1.5文档现在涵盖组件： https ： //docs.angularjs.org/guide/component

基于一些阅读的一些想法（下面的链接）：

  • 组件不是指令的替代品。 组件是一种特殊types的指令，用模板组织控制器。

  • 组件没有链接function，控制器仍然不是你要处理DOM操作的地方。

  • 如果您需要DOM操作，您的组件可以使用其他指令，包括在链接function中的DOM操作。

我花了一段时间才弄明白这一点，但是一旦我做了一些事情，组件就是指令，但并不是所有的指令都是或者需要是组件。

关于链接function的问题是自然而然的，或者当我认为组件正在取代指令的时候。 为什么？ 因为我们已经被教导将DOM操作放在指令的链接函数中：“想要修改DOM的指令通常使用链接选项来注册DOM监听器，并更新DOM。 https://docs.angularjs.org/guide/directive 。

如果你正在运行这个假设（组件replace指令），那么你会发现Angular docs并不回答这个问题，因为一旦你知道组件的目的，这个问题就不是正确的问题。 （组件在$ compileProvider文档中不是[directive文档]（ https://docs.angularjs.org/guide/directive ）。

背景阅读

上面我所说的实际上是托德·莫特（Todd Motto）在关于组件和指令的最佳讨论（可能是迄今为止）中所说的话的一个改写：

https://www.reddit.com/r/angularjs/comments/3taxjq/angular_15_is_set_to_introduce_the_component/

将这些意见提交给一个更为一般的文章可能是有用的。

组件上的大多数文章没有提到链接function（这并不意味着这些不是很好的文章）：

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://medium.com/@tomastrajan/component-paradigm-cf32e94ba78b#.vrbo1xso0

https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

或者当提到链接函数时，它在括号中：

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

一篇文章说，组件“使用控制器而不是链接function”。 但是这不是一个“相反”的情况：控制器不是链接function的替代品。

这使得以类似于使用Web组件或使用Angular 2的应用程序体系结构的方式编写应用程序变得更加容易。

组件的优点：

简单的configuration比普通的指令促进理想默认和最佳实践优化基于组件的架构编写组件指令将更容易升级到Angular 2

何时不使用组件：

对于依赖于DOM操作的指令，添加事件监听器等等，因为当你需要一个由属性或CSS类触发的指令时，当你需要高级指令定义选项，比如priority，terminal，multi-element，编译和链接函数不可用而不是一个元素

好吧，看来控制器现在是适合的地方，因为它是唯一可能的。 我们也不能在组件助手中使用replace选项。

更新（从2017年8月22日起）：在AngularJS中推荐使用$ inject。 阅读Styleguide： Styleguide链接和AngularJS文档： AngularJS文档

要在组件中使用DOM绑定，而不是使用链接function创build指令，可以在控制器function中注入“$ element”或其他需要的服务，例如 

 app.component('pickerField', { controller: PickerField, template: '<span>Your template goes here</span>' }); PickerField.$inject = ['$element']; function PickerField(element) { var self = this; self.model = self.node.model; self.open = function() { console.log('smth happens here'); }; element.bind('click', function(e) { console.log('clicked from component', e); self.open(); }); }

根据目前的Angular2文档（请参阅https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md），Angular2中仍然会有指令。; 所以基本上你可以同时使用@Directive和@Component，其中：

  • 指令对封装行为很有用。
  • Component是一个使用shadow DOM创build封装可视化行为的指令。 组件通常用于创buildUI小部件或将应用程序分解为更小的组件。

所以根据这个，如果你需要DOM操作，你将需要使用@Directive，因此Angular.directive在Angular 1.x. 事件绑定可以使用host属性完成。 关于DOM操作本身，仍然缺less文档（例如https://github.com/angular/angular/blob/master/modules/angular2/docs/core/09_compilation.md或https://github.com/angular/ angular / blob / master / modules / angular2 / docs / core / 08_lifecycle.md ），但可以按照https://stackoverflow.com/a/32062065中的build议查找;Lifecycle 。

作为一个简短的答案，使用Angular 1.5+，如果你有DOM访问，继续使用angular.directive ，否则封装到angular.component 。 另外尽量减less使用$scope作为non-dom事件，而更喜欢使用RxJS， rxjs-b849d6bbd5a5＃.obgb6dl6n ，

Interesting Posts