Comment exiger un contrôleur dans une directive angularjs

Question

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 manière, 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?

Answer 1

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

---

Cela dépend de ce que vous voulez accomplir par le partage d'un contrôleur; vous pouvez soit partager le même contrôleur (bien qu'ont les différentes instances), ou vous pouvez partager la même instance du contrôleur.

Partager un Contrôleur

Deux directives pouvez utiliser le même contrôleur en passant la même méthode pour les deux directives, comme suit:

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

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

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

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

Besoin d'un Contrôleur de

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

require assure la présence d'une autre directive, puis comprend son contrôleur en tant que paramètre à la fonction de lien. Donc, si vous avez deux directives sur l'un des éléments, votre directive peut exiger la présence de l'autre directive et obtenir l'accès à ses méthodes de contrôleur. Une utilisation courante de cas pour ce qui est d'exiger ngModel.

^require, avec l'ajout de l'accent circonflexe, vérifie les éléments de la directive ci-dessus, en plus de l'élément en cours pour tenter de trouver l'autre directive. Cela vous permet de créer des composants complexes, où les "sous-éléments" peuvent communiquer avec le composant parent par le biais de son contrôleur à grand effet. Les exemples pourraient inclure des onglets, où chaque volet peut communiquer avec l'ensemble des onglets pour gérer le passage; un accordéon peut assurer seul est ouvert à tout moment; etc.

Dans les deux cas, vous devez utiliser les deux directives de l'ensemble pour que cela fonctionne. require est un moyen de communication entre les composants.

Consultez le Guide à la page de directives pour plus d'info: http://docs.angularjs.org/guide/directive

Answer 2

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

AngularJS directive contrôleurs nécessitant parent directive contrôleurs?

avec un lien vers ce très claire 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 est dans le jsFiddle.