Angular 嵌入问题
Angular Transclude issue
如何在重复 transclude
期间通过 i
而不是通过 #
调用数组?使用下面的代码,重复使用数组中适当数量的项目构建我的列表,但是返回的 x 行数仅为 object[0]
中指定的数据标记。我无法像在重复中那样引用 i
。
我是不是想错了,还是只是漏掉了什么?
我有一个这样的手风琴模板
#### accordion.html ####
<ion-content scroll="false">
<ion-list>
<ion-item class="item-stable alertHeader" ng-click="vm.toggleGroup()" ng-class="{active: vm.isGroupActive()}">
<div class="row">
<div class="alertHeaderIcon col-xs-1">
<i class="icon" ng-class="{'icon-watchList':vm.tag == 'Tag1', 'icon-topPerformers':vm.tag == 'Tag2'}"></i>
</div>
<div class="alertHeaderLabel col-xs-9">
<span class="labelName">{{vm.tag}}</span>
</div>
<div class="alertHeaderWarning col-xs-1 pull-right">
<span class="label label-pill label-default">7</span>
</div>
<div class="alertHeaderCaret col-xs-1 pull-right">
<i class="icon" ng-class="vm.isGroupActive() ? 'ion-ios-arrow-down' : 'ion-ios-arrow-forward'"></i>
</div>
</div>
</ion-item>
<ion-item class="item-accordion" ng-repeat="i in vm.data" ng-show="vm.isGroupActive()">
<div ng-transclude></div>
</ion-item>
</ion-list>
</ion-content>
然后我将其放入我的标记中,如下所示:
#### alerts.html ####
<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA">
<div class="row">
<div class="home-alert-icon col col-10">
<i class="icon" ng-class="{'icon-watchList':vm.itemsA[0].wlName == 'labelA', 'icon-topPerformers':vm.itemsA[0].wlName == 'labelB'}"></i>
</div>
<div class="home-alert-title col col-70">
{{vm.itemsA[0].wlName}}
</div>
<div class="home-alert-retailers">
{{vm.itemsA[0].wlRetailers}}
</div>
<div class="home-alert-metric col col-20">
{{vm.itemsA[0].wlPercent}}
</div>
</div>
</ca-accordion>
您缺少的是被嵌入的内容存在于调用指令的同级范围内,而不是在您的 ng-repeat 范围内。
所以你就是 i
在这里无法访问的原因:
<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA">
<div class="row">
<div class="home-alert-icon col col-10">
<i class="icon" ng-class="{'icon-watchList':vm.itemsA[0].wlName == 'labelA', 'icon-topPerformers':vm.itemsA[0].wlName == 'labelB'}"></i>
</div>
<div class="home-alert-title col col-70">
{{vm.itemsA[0].wlName}}
</div>
<div class="home-alert-retailers">
{{vm.itemsA[0].wlRetailers}}
</div>
<div class="home-alert-metric col col-20">
{{vm.itemsA[0].wlPercent}}
</div>
</div>
</ca-accordion>
并且只有 vm.itemsA
可以访问。
因此,一个可能的解决方案是将整个 ng-repeat 移到外部,移到嵌入的内容中,
或者编写你自己的指令,它将包含范围,这意味着被包含的内容将存在于你的 ng-repeat 的范围内。
/**
@desc a copy of the ng-transclude implementation, but makes the transcluded content scope
to be in the same scope of where the transcludeWithScope was used (ngTransclude behaivor
bound it to the parent scope)
*/
function transcludeWithScopeDirective() {
return {
restrict: 'EAC',
bindToController: true,
link($scope, $element, $attrs, controller, $transclude) {
function ngTranscludeCloneAttachFn(clone) {
if (clone.length) {
$element.empty();
$element.append(clone);
}
}
// If there is no slot name defined or the slot name is not optional
// then transclude the slot
var slotName = $attrs.transcludeWithScope || $attrs.ngTranscludeSlot;
$transclude($scope, ngTranscludeCloneAttachFn, null, slotName);
},
};
}
angular
.module('transcludeWithScope', [])
.directive('transcludeWithScope', transcludeWithScopeDirective);
然后更新您的 accordion.html
以使用 transcludeWithScope
而不是 ng-transclude:
<ion-item class="item-accordion" ng-repeat="i in vm.data" ng-show="vm.isGroupActive()">
<div transclude-with-scope></div>
</ion-item>
和您的用法:
现在我们可以访问 i,因为我们嵌入的内容位于我们的 ng-repeat 范围内。
<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA">
<div class="row">
<div class="home-alert-icon col col-10">
<i class="icon" ng-class="{'icon-watchList': i.wlName == 'labelA', 'icon-topPerformers': i.wlName == 'labelB'}"></i>
</div>
<div class="home-alert-title col col-70">
{{i.wlName}}
</div>
<div class="home-alert-retailers">
{{i.wlRetailers}}
</div>
<div class="home-alert-metric col col-20">
{{i.wlPercent}}
</div>
</div>
</ca-accordion>
如何在重复 transclude
期间通过 i
而不是通过 #
调用数组?使用下面的代码,重复使用数组中适当数量的项目构建我的列表,但是返回的 x 行数仅为 object[0]
中指定的数据标记。我无法像在重复中那样引用 i
。
我是不是想错了,还是只是漏掉了什么?
我有一个这样的手风琴模板
#### accordion.html ####
<ion-content scroll="false">
<ion-list>
<ion-item class="item-stable alertHeader" ng-click="vm.toggleGroup()" ng-class="{active: vm.isGroupActive()}">
<div class="row">
<div class="alertHeaderIcon col-xs-1">
<i class="icon" ng-class="{'icon-watchList':vm.tag == 'Tag1', 'icon-topPerformers':vm.tag == 'Tag2'}"></i>
</div>
<div class="alertHeaderLabel col-xs-9">
<span class="labelName">{{vm.tag}}</span>
</div>
<div class="alertHeaderWarning col-xs-1 pull-right">
<span class="label label-pill label-default">7</span>
</div>
<div class="alertHeaderCaret col-xs-1 pull-right">
<i class="icon" ng-class="vm.isGroupActive() ? 'ion-ios-arrow-down' : 'ion-ios-arrow-forward'"></i>
</div>
</div>
</ion-item>
<ion-item class="item-accordion" ng-repeat="i in vm.data" ng-show="vm.isGroupActive()">
<div ng-transclude></div>
</ion-item>
</ion-list>
</ion-content>
然后我将其放入我的标记中,如下所示:
#### alerts.html ####
<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA">
<div class="row">
<div class="home-alert-icon col col-10">
<i class="icon" ng-class="{'icon-watchList':vm.itemsA[0].wlName == 'labelA', 'icon-topPerformers':vm.itemsA[0].wlName == 'labelB'}"></i>
</div>
<div class="home-alert-title col col-70">
{{vm.itemsA[0].wlName}}
</div>
<div class="home-alert-retailers">
{{vm.itemsA[0].wlRetailers}}
</div>
<div class="home-alert-metric col col-20">
{{vm.itemsA[0].wlPercent}}
</div>
</div>
</ca-accordion>
您缺少的是被嵌入的内容存在于调用指令的同级范围内,而不是在您的 ng-repeat 范围内。
所以你就是 i
在这里无法访问的原因:
<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA">
<div class="row">
<div class="home-alert-icon col col-10">
<i class="icon" ng-class="{'icon-watchList':vm.itemsA[0].wlName == 'labelA', 'icon-topPerformers':vm.itemsA[0].wlName == 'labelB'}"></i>
</div>
<div class="home-alert-title col col-70">
{{vm.itemsA[0].wlName}}
</div>
<div class="home-alert-retailers">
{{vm.itemsA[0].wlRetailers}}
</div>
<div class="home-alert-metric col col-20">
{{vm.itemsA[0].wlPercent}}
</div>
</div>
</ca-accordion>
并且只有 vm.itemsA
可以访问。
因此,一个可能的解决方案是将整个 ng-repeat 移到外部,移到嵌入的内容中,
或者编写你自己的指令,它将包含范围,这意味着被包含的内容将存在于你的 ng-repeat 的范围内。
/**
@desc a copy of the ng-transclude implementation, but makes the transcluded content scope
to be in the same scope of where the transcludeWithScope was used (ngTransclude behaivor
bound it to the parent scope)
*/
function transcludeWithScopeDirective() {
return {
restrict: 'EAC',
bindToController: true,
link($scope, $element, $attrs, controller, $transclude) {
function ngTranscludeCloneAttachFn(clone) {
if (clone.length) {
$element.empty();
$element.append(clone);
}
}
// If there is no slot name defined or the slot name is not optional
// then transclude the slot
var slotName = $attrs.transcludeWithScope || $attrs.ngTranscludeSlot;
$transclude($scope, ngTranscludeCloneAttachFn, null, slotName);
},
};
}
angular
.module('transcludeWithScope', [])
.directive('transcludeWithScope', transcludeWithScopeDirective);
然后更新您的 accordion.html
以使用 transcludeWithScope
而不是 ng-transclude:
<ion-item class="item-accordion" ng-repeat="i in vm.data" ng-show="vm.isGroupActive()">
<div transclude-with-scope></div>
</ion-item>
和您的用法: 现在我们可以访问 i,因为我们嵌入的内容位于我们的 ng-repeat 范围内。
<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA">
<div class="row">
<div class="home-alert-icon col col-10">
<i class="icon" ng-class="{'icon-watchList': i.wlName == 'labelA', 'icon-topPerformers': i.wlName == 'labelB'}"></i>
</div>
<div class="home-alert-title col col-70">
{{i.wlName}}
</div>
<div class="home-alert-retailers">
{{i.wlRetailers}}
</div>
<div class="home-alert-metric col col-20">
{{i.wlPercent}}
</div>
</div>
</ca-accordion>