Angular指令/子指令在ng-repeat内转换

Question

问题是child指令绑定到parent但是语法{{name}}被忽略ng-repeat.实现这一目标的正确方法是什么？

HTML(主/子指令)

<compact-select
    no-item-selected-text="Add a Customer"
    no-item-selected-icon="fa-user"
    search-placeholder="Type a customer name"
    cs-model="customer"
    cs-items="contacts"
>
    <display-item-template>
        <span>{{name}}</span>
        or
        <span>{{item.name}}</span>
    </display-item-template>
</compact-select>

指示

angular.module('core').directive('compactSelect', [function($timeout) {
    return {
        templateUrl : 'modules/core/views/components/compact-select-tpl.html',
        bindToController: true,
        transclude: true,
        scope: {
            noItemSelectedText: '@',
            noItemSelectedIcon: '@',
            csModel: '=',
            csItems: '=csItems'
        },
        controllerAs : 'ctrl',
        controller : function($scope) {

        }
    };
}]).directive('displayItemTemplate', function($timeout) {
    return {
        require: '^compactSelect',
        restrict: 'E'
    }
});

指令模板(modules/core/views/components/compact-select-tpl.html)

<div class="compact-select-repeater-box" style="" >
    <div ng-transclude ng-repeat="item in ctrl.csItems | filter:searchParam" class="compact-select-repeater" ng-class="ctrl.getHighlightedClass(item)" ng-click="ctrl.itemSelected(item)">
        <span>{{item.name}}</span>
        <span>{{item.id}}</span>
    </div>
    <div style="position:absolute;bottom:0">
        <a href="#">+ Click here to add customer {{ctrl.message}}</a>
    </div>
</div>

我知道

<span>{{item.name}}</span>
<span>{{item.id}}</span>

替换为

<span></span>
or
<span>{{item.name}}</span>

而不是

<span>{{name}}</span>
or
<span>{{item.name}}</span>

问题:如何ng-repeat从child指令中尊重html绑定语法？或者还有另一种方法来实现这一目标吗？

Answer 1

如果我没有错,那么你试图创建一个list view这样template的列表将由用户提供,但方法(点击等)已经可以通过指令获得.

现在,因为angular 1.3,这transcluded scope是一个孩子directive isolated scope,

因此,在您的情况下,如果您遵循正确的层次结构,则可以访问directive scope用户提供的模板中的from.

这是您的范围层次结构:

Directive isolated scope- > ng-repeat new scope for every row- > transcluded scope.

所以,如果你想访问directive scope从transcluded scope,你需要做的$parent(为NG-重复),然后访问item.name,如下图所示:

<display-item-template>            
       <span>Item Name: {{$parent.item.name}}</span>            
</display-item-template>

此外,您不需要内部绑定compact-select-tpl,因为您希望内容来自转换:

<div class="compact-select-repeater-box" style="" >

    <div ng-transclude ng-repeat="item in ctrl.csItems | filter:searchParam" 
    class="compact-select-repeater" 
    ng-class="ctrl.getHighlightedClass(item)" 
    ng-click="ctrl.itemSelected(item)">
       <!--  <span>{{item.name}}</span>
        <span>{{item.id}}</span> -->
    </div>

    <div style="position:absolute;bottom:0">
        <a href="#">+ Click here to add customer {{ctrl.message}}</a>
    </div>
</div>