angularjs – 具有角度分量的组件控制器中$element和$attrs的用途

前端之家收集整理的这篇文章主要介绍了angularjs – 具有角度分量的组件控制器中$element和$attrs的用途前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力加快1.5角度组件的速度.我一直在追踪道格的视频,以便在零件上开始使用角度的文档 https://docs.angularjs.org/guide/component.

在这一点上,组件正在取代使用控制器的指令,但是在我们的1.5代码中,我们仍然会使用指令进行dom操作.

组件控制器内的$element,$attrs的用途是什么?这些似乎可用于操纵.这是链接到文档的plunker.我知道他们没有使用$元素,但这是我正在阅读的例子. http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview

但在代码如此…

angular
  .module('app',[])
  .component('parentComponent',{
    transclude: true,template: `
      <div ng-transclude></div>
    `,controller: function () {
      this.foo = function () {
        return 'Foo from parent!';
      };
      this.statement = function() {
        return "Little comes from this code";
      }
    }
  })
  .component('childComponent',{
    require: {
      parent: '^parentComponent'
    },controller: function () {

      this.$onInit = function () {
        this.state = this.parent.foo();
        this.notice = this.parent.statement();
      };
    },template: `
      <div>
        Component! {{ $ctrl.state }}
        More component {{$ctrl.notice}}
      </div>
    `
  })

如果我们不操纵dom,将使用$element?

这是一个很好的问题.我有一个简单的答案.

它们在组件中发生,因为Component是指令周围的语法糖.

在角度添加组件之前,我正在使用某种类型的组件语法指令,这就像一个约定,在我们的项目中,我们必须使用各种指令,一个负责DOM操作,另一个是使用不应该操作的模板的指令DOM.添加组件后,我们没有更改名称.

所以组件只不过是简单的指令,它被创建为新的实体:

>总是有模板
>范围总是孤立的
>限制始终是元素

我想你可以在角度源中找到更多的答案,但是我建议你不要混合这些实体,如果需要在组件中操作DOM,只需在其中使用指令即可.

原文链接:https://www.f2er.com/angularjs/143063.html

猜你在找的Angularjs相关文章