[英]Angular directive controller scope inheritance
Lets start with some code 让我们从一些代码开始
Html: HTML:
<rd-search-set type="'ActiveProfileContact'">
<form class="navbar-form navbar-static-top" role="search">
<rds-input />
</form>
</rd-search-set>
rds-input template: rds输入模板:
<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: 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;
}
The problem 问题
I'm having alot of trouble getting / setting data on the controller of the rdSearchSet
directive. 我在
rdSearchSet
指令的控制器上获取/设置数据时遇到很多麻烦。 Last thing I tried is setting the rdsInput
directive scope property to false, hoping that I can access the parent scope values using the controllerAs: "src"
property of rdSearchSet
. 我尝试的最后一件事是将
rdsInput
指令scope属性设置为false,希望我可以使用rdSearchSet
的controllerAs: "src"
属性访问父范围值。
My question in short: What is the best way to access the parent directive's controller(as) scope as transparent as possible? 简而言之,我的问题是:尽可能透明地访问父指令的controller(as)范围的最佳方法是什么? Like, use a Directive to load html and bind to parent directive scope properties, both ways.
就像,使用一种指令来加载html并绑定到父指令范围属性,两种方式都可以。
EDIT: 编辑:
I have moved the rdSearchSet
directive html to a template that looks like this: 我已经将
rdSearchSet
指令html移到了看起来像这样的模板中:
<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;
}
The problem that still exists is that I am not able to use the
ControllerAs
prefix.仍然存在的问题是我无法使用
ControllerAs
前缀。 The text input field inrdsInput
uses ang-model="src.value"
but the value is not set in therdSearchSet
's Controller.rdsInput
的文本输入字段使用ng-model="src.value"
但该值未在rdSearchSet
的Controller中设置。
Two problems ... one is a simple typo for ng-model
where you have ng-modal
. 有两个问题...一个是
ng-model
的简单拼写错误,而您有ng-modal
。
The other is isolated scope only works when you use a template, it doesn't work for existing html within the element. 另一个是隔离范围,仅当您使用模板时才起作用,它不适用于该元素中的现有html。
If you move the <form>
to a template your code will work 如果将
<form>
移至模板,则代码将起作用
<rd-search-set></rd-search-set>
JS JS
function rdSearchSet() {
var directive = {
restrict: 'E',
templateUrl:'search.html',
scope: {
.....,
},
controller: "SearchController",
controllerAs: "src"
};
return directive;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.