Comment exiger un contrôleur dans une directive angularjs

Quelqu'un peut-il me dire comment inclure un contrôleur d'une directive dans une autre directive angularJS. par exemple j'ai le code suivant

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

De toute évidence, je devrais pouvoir accéder au contrôleur dans la directive addProduct mais je ne le suis pas. Existe-t-il une meilleure façon de le faire?

J'ai eu de la chance et j'ai répondu à cela dans un commentaire à la question, mais je publie une réponse complète par souci d'exhaustivité et nous pouvons donc marquer cette question comme "Répondue".

Cela dépend de ce que vous voulez accomplir en partageant un contrôleur; vous pouvez soit partager le même contrôleur (mais avoir des instances différentes), soit partager la même instance de contrôleur.

Partager un contrôleur

Deux directives peuvent utiliser le même contrôleur en passant la même méthode à deux directives, comme ceci:

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

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

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

Chaque directive obtiendra sa propre instance du contrôleur, mais cela vous permet de partager la logique entre autant de composants que vous le souhaitez.

Exiger un contrôleur

Si vous souhaitez partager la même instance d'un contrôleur, vous utilisez require.

requireassure la présence d'une autre directive et inclut ensuite son contrôleur comme paramètre de la fonction de liaison. Donc, si vous avez deux directives sur un élément, votre directive peut exiger la présence de l'autre directive et accéder à ses méthodes de contrôleur. Un cas d'utilisation courant pour cela est d'exigerngModel .

^require, avec l'ajout du curseur, vérifie les éléments au-dessus de la directive en plus de l'élément actuel pour essayer de trouver l'autre directive. Cela vous permet de créer des composants complexes dans lesquels les «sous-composants» peuvent communiquer avec le composant parent via son contrôleur de manière efficace. Les exemples peuvent inclure des onglets, où chaque volet peut communiquer avec les onglets globaux pour gérer la commutation; un ensemble d'accordéon pourrait garantir qu'un seul est ouvert à la fois; etc.

Dans les deux cas, vous devez utiliser les deux directives ensemble pour que cela fonctionne. requireest une manière de communiquer entre les composants.

Consultez la page Guide des directives pour plus d'informations: http://docs.angularjs.org/guide/directive

Il y a une bonne réponse stackoverflow ici par Mark Rajcok:

Contrôleurs de directive AngularJS nécessitant des contrôleurs de directive parent?

avec un lien vers ce jsFiddle très clair: 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';
}