Поведение контроллера внутри директив

Я знаю, что a $scope из controller может быть передан функции связи в directives.

Например, в этом коде я могу вызвать функцию из объявленного контроллера для печати "Hello World" в консоли браузера:

 .directive('myDirective', [function () {
        return {
            restrict : 'E',
            replace : true,
            controller: 'MyController',
            templateUrl : 'directives/myDirective.tpl.html',
            link : function (scope, elem, attrs, controller) {
                scope.message = 'Hello World!';
            }
        };
    }])

    .controller('MyController', [function ($scope, $element, $attrs, $log, $timeout) {

        // $timeout to wait the link function to be ready.
        $timeout(function () {
            // This prints Hello World as expected.
            $log.debug($scope.message);
         });


        });
    }])

Хорошо, все отлично.

Мои вопросы:

В этом подходе это область SAME, которая будет использоваться совместно с контроллером и директивой?
Каковы последствия использования этого подхода? Предположим, что я не манипулирует элементами DOM в controller, только в link function.
Мне действительно нужно избегать манипулирования элементами DOM в этом controller? Даже если $scope, $elem и т.д. Одинаковы?

Это вопросы, которые я не нашел в Angular документации по директиве.

Здесь плункер с образцом кода.

Ответ 1

В этом подходе это SAME-область, которая будет разделяться между контроллером и директивой?

Да, это так.

Каковы последствия использования этого подхода? Предположим, что я не буду манипулировать элементами DOM в контроллере, только в функции ссылок.

Контроллер - это то, что обеспечивает директивное поведение, как с обычным приложением Angular. Тем не менее, вы должны манипулировать областью внутри функции контроллера. Если вам нужно изменить область действия функции связи, вызовите ее метод. Кроме того, поскольку контроллер выполняется до функции ссылки, вы должны инициализировать область в первом, чтобы последний мог получить действительную модель для работы.

Мне действительно нужно избегать манипулирования элементами DOM в этом контроллере? Даже если $scope, $elem и т.д. Одинаковы?

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

Наконец, вы можете найти эту статью полезной: Общие сведения о директивах.

Ответ 2

1) Да, они оба разделяют одну и ту же область видимости, потому что вы используете контроллер директивы для регистрации области, что означает, что вы можете поместить "MyController" внутри директивы, например:

return {
  replace: true,
  controller: function($scope,...){ //  equals MyController
  }
}

Если контроллер является оболочкой директивы, а не внутри нее, а в области директивы задано значение true или хеш объекта, то они не будут использовать одну и ту же область.

2) Никаких последствий, просто НЕ ДЕЛАЙТЕ манипулировать DOM в контроллере, одним из способов использования контроллера является соединение директив вместе для получения или установки данных из, возможно, службы или простого увеличения объема (то есть: scope.message = "Hello World" ) в любом случае они должны быть минимальными. Способ, которым вы настроены, идеален, если вы хотите делиться данными между другими директивами, вы можете просто потребовать этот директивный контроллер.

3) Да, избегайте манипулирования DOM в контроллере, его не, предназначенный для логики представления или того, что видит пользователь, то есть роль директив, помните SOC (разделение проблем) каждой части шаблон MVC/MV * имеет свой собственный рулон для воспроизведения.

Подумайте об этом простым способом, так как этот пользователь видит кнопку на слое презентации, кнопка щелчков пользователем Функция для щелчка кнопки происходит на бизнес-уровне (контроллере), который принимает результаты и сохраняет на уровне данных/модели,

Предостережение, если кнопка выполняет что-либо, кроме обработки команды (вычисления, оценки и т.д.) между пользователем и уровнем данных, например добавление классов (DOM-манипуляция), которые входят в директиву.

Отличное чтение и более глубокое здесь

Ответ 3

См. обновленный плункер: http://plnkr.co/edit/pT8rEDz7gWKUPYIZhUYA?p=preview

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

Одна из сильных сторон Angular - это директивы, поэтому я буду использовать их там, где это возможно, чтобы отделить ваши проблемы.