具有 angularJS 个组件的组件控制器中 $element 和 $ attrs 的用途 1.5

Question

我正在努力跟上 1.5 angular 组件的速度。我一直在关注 todd Motto 的视频以开始使用组件以及 angular 的文档 https://docs.angularjs.org/guide/component。

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

组件控制器中的 $element、$attrs 的用途是什么？这些似乎可供操纵。这是文档中 plunker 的 link。我知道他们没有使用 $element，但这是我正在阅读的示例。 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 有什么用？

Answer 1

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

它们出现在组件中只是因为组件是指令周围的语法糖。

在angular添加组件之前，我对指令使用了某种组件语法，这就像一个约定，在我们的项目中我们有两种指令，一种负责DOM 操作，第二个是带有模板的指令，不应操作 DOM。添加组件后，我们只是更改了名称。

所以 Component 只不过是作为新实体创建的简单指令，其中：

总是有模板
作用域总是孤立的
限制总是元素

我认为您可以在 angular 来源中找到更多答案，但我建议您不要混合使用这些实体，如果您需要在组件内部操作 DOM，只需使用里面的指令。

Answer 2

Angular 组件生命周期挂钩允许我们使用 $element 服务

在组件控制器内部进行 DOM 操作

var myApp = angular.module('myApp');
myApp.controller('mySelectionCtrl', ['$scope','$element', MySelectionCtrl]);

myApp.component('mySection', {
    controller: 'mySelectionCtrl',
    controllerAs: 'vm',
    templateUrl:'./component/view/section.html',
    transclude : true
});

function MySelectionCtrl($scope, $element) {
    this.$postLink = function () {
        //add event listener to an element
        $element.on('click', cb);
        $element.on('keypress', cb);

        //also we can apply jqLite dom manipulation operation on element
        angular.forEach($element.find('div'), function(elem){console.log(elem)})

    };

    function cb(event) {
        console.log('Call back fn',event.target);
    }
}

declare component in html

<my-section>
<div class="div1">
    div 1
    <div>
        div 1.1
    </div>
</div>
<div class="div2">
    div 1
</div>

component's partial template(./component/view/section.html)

<div>
<div class="section-class1">
    div section 1
    <div>
        div section 1.1
    </div>
</div>
<div class="section-class1">
    div section 1
</div>

具有 angularJS 个组件的组件控制器中 $element 和 $ attrs 的用途 1.5

Purpose of $element and $ attrs in component controllers with angularJS components 1.5

dom

angularjs

angularjs-components