AngularJS: директивы против контроллеров. Какую логику поставить где?

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

Одно правило, которое я знаю, - "Если оно манипулирует DOM, поместите его в директиву", которое я соблюдаю.

Но все же есть моменты, когда я не уверен, куда поместить мои методы, поскольку я могу поместить их в главный контроллер приложения, в контроллер, поставляемый в качестве опции "controller" в директиве или даже внутри функции, которая находится в (опция "ссылка" ).

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

Итак, я думаю, мой главный вопрос:
1) Есть ли хорошее эмпирическое правило, чтобы узнать, какой код поставить где?

Или, если это слишком абстрактно, вот несколько примеров:
2) У меня есть директива с шаблоном, который я использую только в своем приложении. Что-то должно произойти, когда я нажимаю на элемент. Я уже знаю, что предпочтительнее использовать директиву ng-click для привязки события click в связанной функции.
Но где я должен определить метод, указанный в ng-click?

  • A) Основной контроллер приложения.
  • B) Функция ссылки на директиву.
  • C) Добавьте контроллер в директиву (используя опцию "controller" ) и определите его там.

3) Будет ли ответ на вопрос 2) другим, если я планирую повторно использовать директиву в другом месте?

4) Разный сценарий:
У меня есть кнопка, и при нажатии и перетаскивании она должна перемещать абсолютно несвязанный элемент.
Должен ли я...

  • A) Создайте одну директиву и повлияйте на шаблон и поведение на основе переданного атрибута?
  • B) Создайте две директивы (один для дескриптора, один для целевого элемента)
    Если это так, это снова ставит вопрос о том, куда обращаться с методами для перетаскивания?

Примечания:
Я знаю, что ответы могут немного зависеть от личного мнения, но я надеюсь, что есть некоторые "правила" или "правильные способы сделать это", к которым я могу быть уверен в будущем развитии. Я не использовал код для краткости. Если это потребуется для ответа, я был бы рад предоставить его.

Благодарю вас за ваше время.

ОТВЕТЫ

Ответ 1

Прежде всего, большой вопрос. Я думаю, каждый разработчик new-with- angular борется с различиями со всеми этими компонентами (контроллер, директива, сервис, фильтр и т.д.).

Начнем с основного формального определения:

Директивы - это маркеры в элементе DOM, которые сообщают компилятору HTML AngularJS о прикреплении указанного элемента к этому элементу DOM.

А с другой стороны

Контроллер - это функция конструктора JavaScript, которая используется для увеличения области Angular Scope

Определенное поведение действительно помогает нам с помощью некоторого правила.

Итак, для ваших вопросов выше:

  • Простыми словами, мы, пользовательские контроллеры, управляем областью (областью) в Шаблон HTML со всеми замечательными способностями, которые контроллер приносит (двустороннее связывание, поведение в области охвата, инъекции услуг и т.д.). И мы Используйте директивы, когда мы хотим манипулировать существующим HTML-элементом или В большинстве сценариев настраивается собственный, когда мы думаем о повторном использовании Эти элементы.
  • Это зависит от контекста того, что должен делать ng-click. Допустим, у вас есть ваша настроенная директива для ввода числового значения, которое имеет настроенную конструкцию и поведение, как вы определили в своей директивной конфигурации. И вы используете его в форме, которую ng-click предположил, чтобы поместить модальный с дополнительными значениями и использовать его в другом месте приложения, а ng-click сделает что-то еще. В этом случае функция должна быть scope.fucntion. но пусть говорят, что и местоположение, и все остальные будут делать то же самое, это возьмет функцию в область действия директивы.
  • Отвечено выше:)
  • Каждый из ваших вариантов будет делать это, где "мнение" принимает и меньше правил большого пальца. Зачем? потому что оба пути будут работать, когда у каждого есть плюсы и минусы. Эмпирическое правило, которое я могу найти в сценарии, состоит в том, что если оба элемента являются частью шаблона директивы, я бы ожидал, что "behavious" (функция перетаскивания) будет частью области действия директивы.

Удачи.

Ответ 2

1) Есть ли хорошее эмпирическое правило, чтобы узнать, какой код поставить где?

Здесь много вещей; и я не уверен, что идет борьба с "директивами против контролеров". Они кажутся мне разными. Директивы могут иметь свои собственные контроллеры, если вы этого не знали.

Я рассматриваю директивы как единый, определенный, набор инкапсулированного кода, включая HTML (View) и JavaScript-код (Controller). Я использую директивы, когда хочу повторно использовать что-то как "инкапсулированный" компонент.

Если у меня есть только код JavaScript, который я хочу повторно использовать; Я поставлю услугу AngularJS, которую я вижу как набор кода JavaScript без HTML.

У меня есть директива с шаблоном, который я использую только в своем приложении. Что-то должно произойти, когда я нажимаю на элемент. я уже знаю его предпочтительнее использовать директиву ng-click по привязке клика событие в связанной функции. Но где я должен определить метод поставляется в ng-click?

Я бы определил обработчик как часть выделенной области действия; что-то вроде этого:

scope: 
{            
    onButtonClick: '&onButtonClick'
}

Определите поведение по умолчанию как часть ссылки или контроллера директивы.

link: function ( $scope, element, attrs ) {
  $scope.myDefaultButtonClick = function(){
    // do stuff
  }

        this.onInit = function(){
            if(!$scope.onButtonClick){
                $scope.onButtonClick = $scope.myDefaultButtonClick;
            }
        }
        this.onInit();
}

В вашем JavaScript; вы можете вызвать функцию, которая передается в качестве аргумента:

$scope.onButtonClick();

И вы можете сделать то же самое в своем HTML-шаблоне.

<img src="button.png" ng-click="onButtonClick()">

3) Будет ли ответ на 2) другим, если я планирую повторно использовать директива в другом месте?

Если я не планирую повторное использование; Я бы, вероятно, не использовал директиву.

I have a Button and when clicked and dragged it should move a completely unrelated Element.
Should I...

    A) Create one directive and influence template & behavior based on a passed attribute?
    B) Create two directives (one for the handle, one for the target Element)
    If so, it again poses the question of where to put the methods to handle the dragging?

Я бы выбрал пункт A, вероятно; передавая элемент, который нужно манипулировать в качестве аргумента в директиве. Тем не менее, это зависит от того, насколько я забочусь о возможности использования этой функциональности.

Все, что я говорю, должно считаться субъективным.