Як вимагати контролера в директиві angularjs

Хтось може сказати мені, як включити контролер з однієї директиви в іншу директиву angularJS. наприклад, у мене є такий код

var app = angular.module('shop', []).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/js/partials/home.html'
    })
        .when('/products', {
        controller: 'ProductsController',
        templateUrl: '/js/partials/products.html'
    })
        .when('/products/:productId', {
        controller: 'ProductController',
        templateUrl: '/js/partials/product.html'
    });
}]);

app.directive('mainCtrl', function () {
    return {
        controller: function ($scope) {}
    };
});

app.directive('addProduct', function () {
    return {
        restrict: 'C',
        require: '^mainCtrl',
        link: function (scope, lElement, attrs, mainCtrl) {
            //console.log(cartController);
        }
    };
});

З іншого боку, я мав би мати доступ до контролера в директиві addProduct, але не маю. Чи є кращий спосіб зробити це?

Мені пощастило і я відповів на це в коментарі до запитання, але для повноти публікую повну відповідь, і ми можемо позначити це питання як "Відповідь".

Це залежить від того, що ви хочете досягти спільним використанням контролера; Ви можете або спільно використовувати один і той же контролер (хоча мають різні екземпляри), або ви можете спільно використовувати той самий екземпляр контролера.

Поділіться контролером

Дві директиви можуть використовувати один і той же контролер, передаючи один і той же метод двом директивам, наприклад:

app.controller( 'MyCtrl', function ( $scope ) {
  // do stuff...
});

app.directive( 'directiveOne', function () {
  return {
    controller: 'MyCtrl'
  };
});

app.directive( 'directiveTwo', function () {
  return {
    controller: 'MyCtrl'
  };
});

Кожна директива отримає власний екземпляр контролера, але це дозволяє розподіляти логіку між скільки завгодно компонентів.

Потрібен контролер

Якщо ви хочете поділитися одним і тим же екземпляром контролера, тоді ви використовуєте require.

requireзабезпечує наявність іншої директиви, а потім включає її контролер як параметр до функції зв'язку. Отже, якщо у вас є дві директиви щодо одного елемента, ваша директива може вимагати наявності іншої директиви та отримати доступ до методів контролера. Поширеним випадком використання для цього є вимагати ngModel.

^require, з додаванням каретки, перевіряє елементи вище директиви на додаток до поточного елемента, щоб спробувати знайти іншу директиву. Це дозволяє створювати складні компоненти, де "підкомпоненти" можуть ефективно взаємодіяти з батьківським компонентом через його контролер. Прикладами можуть бути вкладки, де кожна панель може взаємодіяти із загальними вкладками для обробки перемикань; набір акордеонів міг забезпечити одночасне відкриття лише одного; тощо

У будь-якому випадку вам доведеться використовувати дві директиви разом, щоб це працювало. require- це спосіб спілкування між компонентами.

Ознайомтесь зі сторінкою керівництва з директив для отримання додаткової інформації: http://docs.angularjs.org/guide/directive

Тут є хороша відповідь на stackoverflow від Марка Райкока:

Для контролерів директив AngularJS потрібні батьківські контролери директив?

із посиланням на цей дуже зрозумілий jsFiddle: http://jsfiddle.net/mrajcok/StXFK/

<div ng-controller="MyCtrl">
    <div screen>
        <div component>
            <div widget>
                <button ng-click="widgetIt()">Woo Hoo</button>
            </div>
        </div>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp',[])

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        require: '^screen',
        controller: function($scope) {
            this.componentFunction = function() {
                $scope.screenCtrl.doSomethingScreeny();
            }
        },
        link: function(scope, element, attrs, screenCtrl) {
            scope.screenCtrl = screenCtrl
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})


//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}