Angular - получить контроллер родительской директивы в контроллере дочерней директивы (не функция link)

Я знаю, как я могу получить родительский контроллер directive в дочерней директиве link.
Однако я бы предпочел не использовать функцию link$scope все вместе) и иметь весь мой код в функции controller директивы.

 angular.directive('parent', function(){
    return {
        templateUrl: '/parent.html',
        scope: true,
        bindToController: true,
        controllerAs: 'parentCtrl',
        controller: function(){
            this.coolFunction = function(){
                console.log('cool');
            }
        }
    }
});

angular.directive('child', function(){
    return {
        templateUrl: '/child.html',
        require: '^parent',
        scope: true,
        bindToController: true,
        controllerAs: 'childCtrl',
        controller: function() {
            // I want to run coolFunction here.
            // How do I do it?
        }
    }
});

Любая помощь приветствуется!

7 голосов | спросил Dmitry 19 +03002015-10-19T19:07:44+03:00312015bEurope/MoscowMon, 19 Oct 2015 19:07:44 +0300 2015, 19:07:44

3 ответа


0

Вы можете вставить '$ element' в контроллер и получить доступ к родительскому контроллеру, как -

  controller: ($element) ->
    var parentCtrl = $element.parent().controller('parent');
    parentCtrl.coolFunction();
    //..........
    //..........

Возможно, это не самый прозрачный способ доступа к «любому» родительскому контроллеру, поскольку для него требуется конкретное имя директивы, а именно jqlite, а не чисто Angular.

Эта тема оказалась полезной - Как получить доступ к контроллеру родительской директивы, потребовав его рекурсивно?

РЕДАКТИРОВАТЬ: Спасибо @Dmitry за то, что выяснилось, что angular не нужен '.parent' для получения контроллера. Обновленный код -

  controller: ($element) ->
    var parentCtrl = $element.controller('parent');
    parentCtrl.coolFunction();
    //..........
ответил FrailWords 19 +03002015-10-19T20:13:29+03:00312015bEurope/MoscowMon, 19 Oct 2015 20:13:29 +0300 2015, 20:13:29
0

Правильный шаблон для этого будет

app.directive('child', function(){
    return {
        templateUrl: '/child.html',
        require: ['child', '^parent'],
        scope: true,
        bindToController: true,
        controllerAs: 'childCtrl',
        controller: function() {
            this.coolFunction = function () {
                this._parent.coolFunction();
            }
        },
        link: function (scope, element, attrs, ctrls) {
            var childCtrl = ctrls[0];
            var parentCtrl = ctrls[1];
            childCtrl._parent = parentCtrl;
        }
    }
});

Плохо то, что _parent попадает в область видимости с помощью controllerAs, но это редко будет проблемой.

Обратите внимание, что у вас не будет доступа к родительскому контроллеру от дочернего, пока link склеит их вместе. Это нормально, если вы используете родительский контроллер в дочерних методах.

Контроллер предоставляет методы и начальные свойства для просмотра модели (и он делает это чище с controllerAs), ссылки склеивают материал, вот как работают директивы.

Оба $scope и link имеют их цели в Angular 1.x и являются незаменимыми даже при последних разработках сообщества. Изгнание их без уважительной причины чрезмерно усердно и может привести к плохим дизайнерским решениям. Отсутствие слов «ссылка» и «область» в коде не поможет приложению легче перейти на 2.x. Хотя сейчас изучаю Angular 2 и вырабатываю правильные привычки для 1.x.

ответил estus 20 +03002015-10-20T03:58:26+03:00312015bEurope/MoscowTue, 20 Oct 2015 03:58:26 +0300 2015, 03:58:26
0

Смотрите здесь или здесь

    var parentForm = $element.inheritedData('$formController') || .... литий> var parentForm = $element.controller('form') литий>
ответил Felix 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 30 Sep 2016 11:14:19 +0300 2016, 11:14:19

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132