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。

以下是您的范围层次结构：

Directive isolated scope - ＆gt; ng-repeat new scope for every row - ＆gt; transcluded scope。

因此，如果您想从directive scope访问transcluded scope，您需要执行$parent（对于ng-repeat），然后访问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>

Answer 2

您在另一个指令中转换的displayItemTemplate指令已经插入了数据{{name}}和{{item.name}}。

如果$ scope中没有这些变量，它会在你的跨度内转换空字符串。

然后在你的compactSelect指令中，被转换的div将覆盖它的内容。

如果在另一个指令的模板中移动displayItemTemplate指令，则重复将起作用。（您需要删除ng（transclude和transclude：true

Fiddle

此外，如果您使用bindToController，请不要将属性放在范围内。

function compactSelect() {
  return {
    template : [
      '<div class="compact-select-repeater-box" style="" >',
      '<div ng-repeat="item in ctrl.csItems | filter:searchParam" class="compact-select-repeater" ng-class="ctrl.getHighlightedClass(item)" ng-click="ctrl.itemSelected(item)">',
        '<display-item-template>',
            '<span>{{item.name}}</span>',
        '</display-item-template>',
      '</div>',
      '<div style="position:absolute;bottom:0">',
          '<a href="#">+ Click here to add customer {{ctrl.message}}</a></div></div>',
    ].join(''),
    bindToController: {
      noItemSelectedText: '@',
      noItemSelectedIcon: '@',
      csItems: '=csItems'
    },
    scope: {},
    controllerAs : 'ctrl',
    controller : function($scope) {

    }
  }
}
function displayItemTemplate() {
    return {
        require: '^compactSelect',
        restrict: 'E'
    }
}
function SuperController() {
	this.name = "a name";
	this.contacts = [{name:"rob"}, {name:"jules"}, {name:"blair"}];
}
angular.module('myApp', []);
angular
    .module('myApp')
    .controller('SuperController', SuperController)
    .directive('compactSelect', compactSelect)
    .directive('displayItemTemplate', displayItemTemplate);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="SuperController as s">
    <compact-select
        no-item-selected-text="Add a Customer"
        no-item-selected-icon="fa-user"
        search-placeholder="Type a customer name"
        cs-items="s.contacts">
    </compact-select>
  </div>
</div>

角度指令/子指令在ng-repeat

2 个答案: