Angular ngController vs Контроллер, построенный в соответствии с Директивой

Мне интересно, какие варианты использования для этих двух методов создания контроллера:

Использование ngController:

myApp.controller('myController', ['$scope', function ( $scope ) {

}]);

Построение контроллера в директиве с атрибутом контроллера:

myApp.directive ( 'myDirective', [ '$window', function( $window ) {
    return {
        restrict: 'A',
        controller: [ '$scope', function( $scope ) {

        }],
        link: function( scope, element, attrs ) {

        }
    };
}]);

Есть ли какая-либо причина, по которой вы не могли бы построить контроллер в директиве, если бы оба они были вызваны на один и тот же элемент?

Это просто вопрос о том, насколько широко используется/сложный контроллер?

ОТВЕТЫ

Ответ 1

Причина использования директивного контроллера сводится в одном предложении:

Чтобы создать повторно используемые компоненты

Контроллер директивы должен содержать логику компонента, который может быть повторно использован. Использование директивного контроллера вместе с изолировать область - это способ создания многоразовых компонентов.

Возьмите в качестве примера paginator: paginator нуждается в некоторой логике для уведомления другого компонента (например, сетки) текущей выбранной страницы, чтобы сетка могла соответствующим образом обновиться. Эта логика может быть записана внутри контроллера директивы для повторного использования. При использовании вместе с изолировать область действия, эта область не является жесткой для приложения-контроллера приложения, и вам легко настроить pageSize для привязки к любому свойству области контроллера приложения.

Ответ 2

Существует тонкая разница между обычным контроллером (который создается с помощью ng-контроллера или маршрутов) и директивным контроллером.

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

  • Единственная цель директивного контроллера - указание директивной связи. Очень хорошим примером использования является показ на главной странице компонента "УгловыеJS" для вкладок.

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

Единственная причина использовать контроллер с директивой - это если вы хотите сделать какую-то директиву для директивной коммуникации. Во всем остальном вы, вероятно, должны придерживаться написания всей вашей логики scope в функции связывания.

Ответ 3

Вызов контроллера директивы каждый раз при вызове директивы я имею в виду

<directive id="1"></directive>
<directive id="2"></directive>
<directive id="3"></directive>

Контрольный вызов контроллера 3 раза и каждый из них имеет собственную область действия.

И ngController имеет тот же характер. Но ngcontroller также может повторно использоваться на других страницах директивы /html.

вы также можете поместить ngcontroller в директиву (мы предполагаем, что appCtrl определяет в любом файле controller.js)

.directive('directive',function(){
    return{
         scope:{},
         template:"<div>{{hello}}</div>",
         controller:"appCtrl"
    }
})

Ответ 4

Добавление некоторых деталей относительно доступа к методам и значениям в директивном контроллере:

Родительская директива

myApp.directive ( 'parent', [ function() {
    return {
        restrict: 'A',
        scope: {},
        controller: [ '$scope', function( $scope ) {
            //this.myVar = ''; //accessible in child directives
            //$scope.myVar = ''; //accessible in template
            $scope.myVar = this.myVar = '';
        }],
        template: '<div data-child> {{myVar}} </div>',
        link: function( scope, element, attrs ) {

            console.log( scope.myVar );

        }
    };
}]);

Директива для детей

myApp.directive ( 'child', [ function() {
    return {
        restrict: 'A',
        require: '^parent',
        link: function( scope, element, attrs, ctrl ) {

            console.log( ctrl.myVar );

        }
    };
}]);