继续讨论
Confused about Angularjs transcluded and isolate scopes & bindings
<controller>
<directive>
transcluded html
</directive>
</controller>
通过应用程序中的上述一般结构,在链接讨论中暗示嵌入范围基本上是从父范围( Controller )继承的,并且嵌入范围不能访问指令范围。解释这个的文章是http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
我的问题是 - 嵌入范围是否可以访问指令范围?
根据上面的文章,如果我们在指令的链接函数中使用transclude函数并将代码编写为,这应该是可能的:
transclude(scope, function(clone, scope) {
element.append(clone);
});
这真的有效吗?我在我的应用程序上尝试了同样的方法,但它不起作用。这是我一直在使用的代码。
指令定义:
(function(){
'use strict';
angular.module('checkoutApp')
.directive('wizardCard', ['shipToService','deliveryService','billingService', wizardCardDirective]);
function wizardCardDirective(shipToService,deliveryService,billingService){
return {
restrict : 'E',
scope : {
current : '@',
checkoutStates: '='
},
transclude:true,
templateUrl: '/UsabilitySites/Cart/Checkout/app/components/shared/wizard-card.html',
link: function(scope, element, attrs,ctrl,transclude){
scope.bla == "ajcnasc";
transclude(scope, function(clone, scope) {
element.append(clone);
});
}
};
}
})();
向导-card.html -
<div class="wizardContainer">
{{bla}}
</div>
范围变量范围在打开 html 时只是空的。
有人能告诉我为什么会这样吗?
上述问题已解决
更新新问题:
现在我尝试使用多槽嵌入来执行此操作,但它不起作用。
指令定义:
(function(){
'use strict';
angular.module('checkoutApp')
.directive('wizardCard', [wizardCardDirective]);
function wizardCardDirective(){
return {
restrict : 'E',
scope : {
current : '@',
checkoutStates: '='
},
transclude: {
'completed': 'completed',
'inprogress': 'inprogress'
},
templateUrl: 'wizard-card.html',
link: function(scope, element, attrs,ctrl,transclude){
scope.bla = "ajcnasc";
transclude(scope, function(clone, scope) {
element.append(clone);
});
}
};
}
})();
向导-card.html -
<div class="wizardContainer">
<div ng-transclude="completed">
</div>
<div ng-transclude="inprogress">
</div>
</div>
正在使用的指令 -
<wizard-card current="shipping" checkout-states="checkoutStates">
<completed>
bla {{bla}}
</completed>
<inprogress>
{{bla}}
</inprogress>
</wizard-card>
这也给了我一个空白,而 scope.$id 给了我另一个值(与指令不同)。
根据这个概念,它应该以相同的方式用于多槽嵌入。但我不知道为什么它不能使用这段代码。
最佳答案
出于调试目的,您可以输入 {{$id}}
在您的模板中。如果 $interpolation
将公开范围 ID工作正常。
你错误地使用了双等号 ==
.而是做 scope.bla = "ajcnasc"
. DEMO on JSFiddle .
是否可以将嵌入的元素绑定(bind)到指令范围?
是的。ng-transclude
指令模板中使用的指令将绑定(bind)到指令的父范围。但是通过使用指令自己的范围在指令的链接函数中进行嵌入,您可以将被嵌入的元素绑定(bind)到指令范围。
关于angularjs - 嵌入范围是否可以访问指令范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35299365/