Bagaimana cara membutuhkan pengontrol dalam direktif angularjs

Adakah yang bisa memberi tahu saya cara menyertakan pengontrol dari satu direktif di direktif angularJS lain. misalnya saya memiliki kode berikut

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

Dengan semua akun, saya seharusnya dapat mengakses pengontrol di arahan addProduct tetapi saya tidak. Apakah ada cara yang lebih baik untuk melakukan ini?

Saya beruntung dan menjawab ini dengan mengomentari pertanyaan, tetapi saya memposting jawaban lengkap demi kelengkapan sehingga kami dapat menandai pertanyaan ini sebagai "Dijawab".

Itu tergantung pada apa yang ingin Anda capai dengan berbagi pengontrol; Anda dapat berbagi pengontrol yang sama (meskipun memiliki contoh yang berbeda), atau Anda dapat berbagi contoh pengontrol yang sama.

Bagikan Pengontrol

Dua arahan dapat menggunakan pengontrol yang sama dengan meneruskan metode yang sama ke dua arahan, seperti:

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

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

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

Setiap direktif akan mendapatkan contoh pengontrolnya sendiri, tetapi ini memungkinkan Anda untuk berbagi logika di antara sebanyak mungkin komponen yang Anda inginkan.

Membutuhkan Pengontrol

Jika Anda ingin berbagi contoh pengontrol yang sama, gunakan require.

requirememastikan keberadaan direktif lain dan kemudian menyertakan pengontrolnya sebagai parameter ke fungsi tautan. Jadi, jika Anda memiliki dua arahan pada satu elemen, arahan Anda dapat memerlukan keberadaan arahan lain dan mendapatkan akses ke metode pengontrolnya. Kasus penggunaan umum untuk ini adalah mensyaratkan ngModel.

^require, dengan tambahan tanda sisipan, periksa elemen direktif di atas selain elemen saat ini untuk mencoba menemukan direktif lainnya. Hal ini memungkinkan Anda untuk membuat komponen kompleks di mana "sub-komponen" dapat berkomunikasi dengan komponen induk melalui pengontrolnya untuk mendapatkan efek yang hebat. Contohnya dapat mencakup tab, di mana setiap panel dapat berkomunikasi dengan keseluruhan tab untuk menangani pengalihan; satu set akordeon dapat memastikan hanya satu yang terbuka pada satu waktu; dll.

Di kedua acara, Anda harus menggunakan kedua arahan bersama agar ini bekerja. requireadalah cara berkomunikasi antar komponen.

Lihat halaman Panduan tentang arahan untuk info lebih lanjut: http://docs.angularjs.org/guide/directive

Ada jawaban stackoverflow yang bagus di sini oleh Mark Rajcok:

Pengontrol direktif AngularJS membutuhkan pengontrol direktif orang tua?

dengan tautan ke jsFiddle yang sangat jelas ini: 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';
}