Назначение $element и $attrs в контроллерах компонентов с компонентами angularJS 1.5

Я работаю над тем, чтобы набрать скорость с 1,5 угловыми компонентами. Я следил за видео Тодда Мотто, чтобы начать работу с компонентами, а также с документацией angular https://docs.angularjs.org/guide/component. .

На данный момент кажется, что компоненты заменяют директивы, использующие контроллеры, но в нашем коде 1.5 мы по-прежнему будем использовать директивы для манипулирования dom.

Какова цель $element, $attrs внутри контроллера компонентов? Они кажутся доступными для манипуляций. Вот ссылка на плункер из документации. Я знаю, что они не используют $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>
    `
  })

Какая польза от $element, если мы не манипулируем домом?


dom angularjs angularjs-components
person Winnemucca    schedule 18.02.2016    source источник
comment
Функция template будет иметь Raw DOM, и это неправильное место для выполнения манипуляций с DOM.   -  person Pankaj Parkar    schedule 18.02.2016
comment
Спасибо @PankajParkar. Я обновил свой вопрос, еще раз прочитав документы. Определенно понимаю, что мы все еще используем функции и директивы ссылок в 1.5 с компонентами, просто не получаем $element и его место в контроллере компонента, если это не для манипулирования домом   -  person Winnemucca    schedule 18.02.2016
comment
У меня есть аналогичный запрос, но подробнее о $attrs. Если у меня есть входные данные для компонента, который никогда не используется в представлении, а просто используется для некоторой логики в контроллере, должен ли я передать его через привязки (хорошо для сохранения согласованности API) или внедрить $attrs в контроллер и просто прочитайте его прямо из этого (что позволяет сохранить это свойство в контроллере, что, возможно, более аккуратно). Очевидно, что оба работают нормально. В настоящее время я пытаюсь ответить на этот вопрос с точки зрения «что делает Angular 2?» но еще не пришли к твердому выводу. Вы сами пришли к дальнейшим выводам?   -  person sifriday    schedule 24.05.2016
comment
Если вы хотите использовать такие компоненты, как директивы, вы можете ввести $element как зависимость от контроллера: controller: function($element) { ... }   -  person jcubic    schedule 19.12.2016

Ответы (2)


arrow_upward
23
arrow_downward

Это отличный вопрос. И у меня есть на него простой ответ.

Они имеют место в компонентах только потому, что Компонент — это синтаксический сахар вокруг директивы.

До того, как angular добавил Components, я использовал какой-то компонентный синтаксис для директив, это было как соглашение, что в нашем проекте у нас есть два вида директив, одна отвечает за манипуляции с DOM, вторая — это директивы с шаблонами, которые не должны манипулировать ДОМ. После того, как компоненты были добавлены, мы не более чем изменили названия.

Итак, Component — это не что иное, как простая директива, созданная как новая сущность, которая:

  1. Всегда есть шаблон
  2. Сфера всегда изолирована
  3. Ограничение всегда является элементом

Я думаю, вы можете найти еще больше ответов в источниках angular, но я советую вам не смешивать эти сущности, и в случае, если вам нужно манипулировать DOM внутри вашего компонента, просто используйте директиву внутри.

person Mikki Kobvel    schedule 19.09.2016

arrow_upward
22
arrow_downward

Крючки жизненного цикла компонента Angular позволяют нам выполнять манипуляции с DOM внутри контроллера компонента с помощью службы $element

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);
    }
}

объявить компонент в 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>

person Ratheesh    schedule 15.03.2017