Wie man einen Controller in einer AngularJS-Direktive benötigt

Kann mir jemand sagen, wie man einen Controller aus einer Direktive in eine andere angleJS-Direktive einbindet. Zum Beispiel habe ich den folgenden Code

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

Auf jeden Fall sollte ich in der addProduct-Direktive auf den Controller zugreifen können, bin es aber nicht. Gibt es einen besseren Weg, dies zu tun?

Ich hatte Glück und beantwortete dies in einem Kommentar zu der Frage, aber der Vollständigkeit halber poste ich eine vollständige Antwort, damit wir diese Frage als "Beantwortet" markieren können.

Dies hängt davon ab, was Sie durch die gemeinsame Nutzung eines Controllers erreichen möchten. Sie können entweder denselben Controller gemeinsam nutzen (obwohl Sie unterschiedliche Instanzen haben), oder Sie können dieselbe Controller-Instanz gemeinsam nutzen.

Teilen Sie einen Controller

Zwei Direktiven können denselben Controller verwenden, indem sie dieselbe Methode an zwei Direktiven übergeben:

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

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

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

Jede Direktive erhält eine eigene Instanz des Controllers. Auf diese Weise können Sie die Logik jedoch auf beliebig viele Komponenten verteilen.

Benötigen Sie einen Controller

Wenn Sie dieselbe Instanz eines Controllers gemeinsam nutzen möchten , verwenden Sie require.

requirestellt das Vorhandensein einer anderen Direktive sicher und schließt dann deren Controller als Parameter für die Verbindungsfunktion ein. Wenn Sie also zwei Direktiven für ein Element haben, kann Ihre Direktive das Vorhandensein der anderen Direktive erfordern und Zugriff auf ihre Controller-Methoden erhalten. Ein häufiger Anwendungsfall hierfür ist das Erfordernis ngModel.

^requireÜberprüft mit dem Caret zusätzlich zum aktuellen Element die Elemente über der Direktive, um zu versuchen, die andere Direktive zu finden. Auf diese Weise können Sie komplexe Komponenten erstellen, bei denen "Unterkomponenten" über die Steuerung mit der übergeordneten Komponente effektiv kommunizieren können. Beispiele könnten Registerkarten sein, in denen jeder Bereich mit den gesamten Registerkarten kommunizieren kann, um das Umschalten zu handhaben. Ein Akkordeonset könnte sicherstellen, dass jeweils nur eines geöffnet ist. etc.

In beiden Fällen müssen Sie die beiden Anweisungen zusammen verwenden, damit dies funktioniert. requireist eine Art der Kommunikation zwischen Komponenten.

Weitere Informationen finden Sie auf der Leitfadenseite der Richtlinien: http://docs.angularjs.org/guide/directive

Hier gibt es eine gute Stackoverflow-Antwort von Mark Rajcok:

AngularJS-Direktiven-Controller, die übergeordnete Direktiven-Controller benötigen?

mit einem Link zu dieser sehr klaren 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';
}