Angularjs yönergesinde bir denetleyiciye nasıl ihtiyaç duyulur

Biri bana bir yönergeden bir denetleyiciyi başka bir angularJS yönergesine nasıl dahil edeceğimi söyleyebilir mi? örneğin şu koda sahibim

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

Her halükarda, addProduct yönergesinde denetleyiciye erişebilmeliyim ama değilim. Bunu yapmanın daha iyi bir yolu var mı?

Şanslıydım ve bunu soruya bir yorumda yanıtladım, ancak eksiksizlik uğruna tam bir yanıt gönderiyorum ve böylece bu soruyu "Yanıtlandı" olarak işaretleyebiliriz.

Bir denetleyiciyi paylaşarak neyi başarmak istediğinize bağlıdır; aynı denetleyiciyi (farklı örneklere sahip olsa da) paylaşabilir veya aynı denetleyici örneğini paylaşabilirsiniz.

Bir Denetleyiciyi Paylaşın

İki yönerge aynı yöntemi iki yönergeye geçirerek aynı denetleyiciyi kullanabilir, örneğin:

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

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

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

Her yönerge, denetleyicinin kendi örneğini alacaktır, ancak bu, mantığı istediğiniz kadar bileşen arasında paylaşmanıza olanak tanır.

Bir Denetleyici Gerektirir

Bir denetleyicinin aynı örneğini paylaşmak istiyorsanız , kullanırsınız require.

requirebaşka bir yönergenin varlığını sağlar ve daha sonra denetleyicisini bağlantı işlevine bir parametre olarak dahil eder. Dolayısıyla, bir öğe üzerinde iki yönergeniz varsa, yönergeniz diğer yönergenin varlığını gerektirebilir ve denetleyici yöntemlerine erişim sağlayabilir. Bunun için ortak bir kullanım durumu gerektirmektir ngModel.

^require, imleci ekleyerek, diğer yönergeyi bulmaya çalışmak için geçerli öğeye ek olarak yönergenin üzerindeki öğeleri de kontrol eder. Bu, "alt bileşenlerin" büyük bir etki için denetleyicisi aracılığıyla ana bileşenle iletişim kurabildiği karmaşık bileşenler oluşturmanıza olanak tanır. Örnekler arasında, her bölmenin geçişi işlemek için genel sekmelerle iletişim kurabildiği sekmeler yer alabilir; bir akordeon seti aynı anda yalnızca birinin açık olmasını sağlayabilir; vb.

Her iki durumda da, bunun çalışması için iki yönergeyi birlikte kullanmanız gerekir. requirebileşenler arasında iletişim kurmanın bir yoludur.

Daha fazla bilgi için yönergelerin Kılavuz sayfasına bakın: http://docs.angularjs.org/guide/directive

Mark Rajcok'un burada iyi bir yığın aşımı cevabı var:

Ana yönerge denetleyicileri gerektiren AngularJS yönergesi denetleyicileri?

bu çok net jsFiddle bağlantısıyla: 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';
}