Давайте начнем с кода
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
.
Две проблемы... одна простая опечатка для 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;
}