Наследование области контроллера угловых директив

Question

Наследование области контроллера угловых директив

0

Давайте начнем с кода

Html:

<rd-search-set type="'ActiveProfileContact'">
    <form class="navbar-form navbar-static-top" role="search">
        <rds-input />
    </form>
</rd-search-set>

Шаблон rds-input:

<div class="input-group rd-search-wrap">
<div class="input-group-addon">
    <i class="fa fa-search"></i>
</div>
<input type="text" value="" class="form-control" placeholder="{{'FIND_CONTACT' | translate | capitalize}}..." ng-modal="src.value" />
<div class="rd-search-state">
    <i class="fa spin2D fa-spinner" ng-if="src.isBusy"></i>
    <span class="text-muted rd-search-result" ng-if="!src.isBusy">{{src.amountString}}</span>
</div>

Javascript/AngularJs:

angular
    .module("App")
    .directive("rdSearchSet", rdSearchSet)
    .directive("rdsInput", rdsInput);

function rdSearchSet() {
    var directive = {
        restrict: 'E',
        scope: {
            onSearch: "=onSearch",
            searchForType: "=type",
            relatedGuids: "=rdSearchRelatedGuids",
            searchEventType: "=rdSearchEventType",
        },
        controller: "SearchController",
        controllerAs: "src",
        bindToController: true,
        replace: false,
    };

    return directive;
}

rdsInput.$inject = ["rdBaseUrl"];
function rdsInput(rdBaseUrl) {
    var directive = {
        restrict: 'E',
        replace: true,
        templateUrl: rdBaseUrl + "Partials/Directives/Search/rdsInput.html",
        require: "^rdSearchSet",
        transclude: true,
        scope: false,
    };

    return directive;
}

Проблема

У меня много проблем с получением/настройкой данных на контроллере директивы rdSearchSet. Последнее, что я попробовал, - установить для rdsInput директивы rdsInput значение false, надеясь, что я rdsInput доступ к значениям родительской области с помощью свойства controllerAs: "src" rdSearchSet.

Мой вопрос вкратце: Каков наилучший способ доступа к родительскому директивному контроллеру (как) сфера как можно более прозрачной? Например, используйте Директиву для загрузки html и привязки к свойствам свойств родительской директивы в обоих направлениях.

РЕДАКТИРОВАТЬ:
Я переместил rdSearchSet директиву rdSearchSet в шаблон, который выглядит так:

<form class="navbar-form navbar-static-top navbar-royal" role="search">
    <rds-input />
</form>
<rds-list />

rdSearchSet.$inject = ["rdBaseUrl"];
    function rdSearchSet(rdBaseUrl) {
        var directive = {
            restrict: 'E',
            scope: {
                onSearch: "=onSearch",
                searchForType: "=type",
                relatedGuids: "=rdSearchRelatedGuids",
                searchEventType: "=rdSearchEventType",
            },
            templateUrl: rdBaseUrl + "Partials/Directives/Search/rdsSearchSet.html",
            controller: "SearchController",
            controllerAs: "src",
            bindToController: true,
            replace: false,
        };

        return directive;
    }

Проблема, которая все еще существует, заключается в том, что я не могу использовать префикс ControllerAs. Поле ввода текста в rdsInput использует ng-model="src.value" но значение не задано в контроллере rdSearchSet.

Jeroen Vorsselman 04 янв. 2016, в 03:46

Источник

0

В чем смысл добавления этого поиска в директиву? Будет ли работать основной фильтр поиска?
someoneHere 04 янв. 2016, в 03:32
0

@someoneHere Контроллер этих директив отправляет запросы на сервер для поиска данных. Я должен использовать директивы, так как я хотел использовать это в нескольких сценариях.
Jeroen Vorsselman 04 янв. 2016, в 03:36
0

Вы можете определить функцию link для вашей директивы rdsInput и использовать четвертый аргумент (набор требуемых контроллеров) для доступа к области родительского контроллера с псевдонимом controllerAs (то есть что-то вроде ctrls[0].src ).
miqh 04 янв. 2016, в 03:38
0

@miqid Я знаю, что это будет работать, но я не понимаю, как «scope: false» будет работать в этом сценарии, потому что «scope: false» не создает новую область и наследует родительскую область. Тогда с чем я должен связать свойства контроллера? И почему я не могу получить доступ к именам свойств родительского контроллера без метода link?
Jeroen Vorsselman 04 янв. 2016, в 03:50

Показать ещё 2 комментария

Теги:

javascript

angularjs

angularjs-scope

angularjs-directive

1 ответ

Ещё вопросы

В чем смысл добавления этого поиска в директиву? Будет ли работать основной фильтр поиска?
@someoneHere Контроллер этих директив отправляет запросы на сервер для поиска данных. Я должен использовать директивы, так как я хотел использовать это в нескольких сценариях.
Вы можете определить функцию link для вашей директивы rdsInput и использовать четвертый аргумент (набор требуемых контроллеров) для доступа к области родительского контроллера с псевдонимом controllerAs (то есть что-то вроде ctrls[0].src ).
@miqid Я знаю, что это будет работать, но я не понимаю, как «scope: false» будет работать в этом сценарии, потому что «scope: false» не создает новую область и наследует родительскую область. Тогда с чем я должен связать свойства контроллера? И почему я не могу получить доступ к именам свойств родительского контроллера без метода link?

charlietfl · Answer 1 · 2016-01-04T01-18-00.000Z

Две проблемы... одна простая опечатка для ng-model где у вас есть ng-modal.

Другое изолированное пространство работает только при использовании шаблона, оно не работает для существующего html внутри элемента.

Если вы переместите <form> в шаблон, ваш код будет работать

<rd-search-set></rd-search-set>

JS

function rdSearchSet() {
    var directive = {
        restrict: 'E',
        templateUrl:'search.html',
        scope: {
            .....,
        },
        controller: "SearchController",
        controllerAs: "src"
    };

    return directive;
}

DEMO

Я сделал это, но кажется, что ControllerAs не наследуется дочерними директивами. Можно ли это сделать вообще? Я могу опубликовать код в ближайшее время.
Не ясно, какова ваша новая проблема
Я еще объяснил проблему в редактировании.
Я удалил префикс controllerAs: "src" в дочерней директиве rdsInput и перенес свойство value в объект. Это работает, но у меня остался еще один вопрос. Кажется, что controllerAs: "src" не может быть унаследован дочерними директивами, так ли это, и если да, то почему?
Обновите демо, показывающее, где у вас возникли проблемы. Не уверен, как вы пытаетесь inherit или что именно вы пытаетесь сделать
Похоже, я допустил синтаксическую ошибку HTML, заменив <rds-search /> на <rds-search></rds-search> . Теперь событие для значения обновления $watch не работает, поэтому я решил использовать ng-keyup rdsInput директиве rdsInput . DEMO