AngularJS：在包含嵌套ng重复的transcluded指令中访问父范围

Question

我正在研究一个基本指令，该指令创建适合Bootstrap的div网格。给它一个项目集合，并可以指定它可以包含的列数。它是transcluded，所以你可以定义为每个项目显示的模板。

我把集合分成行，然后有嵌套的中继器，第一个创建每一行，第二个创建每列（然后跨越该项目的内容）。它在这种简单的情况下运作良好。

.directive('grid', [function() { 
    return { 
      restrict: 'AE', 
      template: '<div class="row" ng-repeat="row in rows"><div ng-repeat="item in row" ng-class="{\'col-md-{{columnSpan}}\': true, \'active\': isSelected(item) }"><div class="thumbnail" ng-transclude=""></div></div></div>', 
      transclude: true, 
      scope: { 
       items: '=grid', 
       columns: '@', 
       columnSpan: '@' 
      }, 
      controller: [ 
       '$scope', function($scope) { 
       } 
      ], 
      link: function($scope, $el, $attrs) { 
       $attrs.$observe('columns', function(val) { 
        $scope.columns = val || 4; 
       }); 

       $attrs.$observe('columnSpan', function(val) { 
        $scope.columnSpan = val || 12/$scope.columns; 
       }); 

       $scope.$watchCollection('items', function(items) { 
        $scope.rows = $scope.rows || []; 
        $scope.rows.length = 0; 

        if (!items) return; 

        var numRows = Math.floor(items.length/$scope.columns); 
        numRows = items.length % $scope.columns !== 0 ? numRows + 1 : numRows; 

        for (var i = 0; i < numRows; i++) { 
         var row = items.slice(i * $scope.columns, (i + 1) * $scope.columns); 
         $scope.rows.push(row); 
        } 

       }); 
      } 
    }; 
    }]); 

问题是在transcluded内容中，我有时需要调用一个函数或从父范围访问一个项目。例如，假设我想格式化一个显示名称，或添加一个点击处理程序。

<!-- addHello is defined on the controller scope. this doesn't work --> 
<div grid="items" columns="3"> 
    {{addHello(item) || 'Undefined'}} (name is {{item.name}}) 
</div> 

因为这将创建多个transcluded范围，我已经通过链接$parent直到我最终找到它UNNEST范围。

<!-- works, but ಠ_ಠ --> 
<div grid="items" columns="3"> 
    {{$parent.$parent.$parent.$parent.addHello(item) || 'Undefined'}} (name is {{item.name}}) 
</div> 

这也适用，但它的笨拙，违反了迪米特，因为如果我改变是如何工作的内部在未来，它会潜在地打破transcluded内容是重要的法律。我该如何改进以避免此问题？

Fully functional plunk。

Answer 1

使用委托模式。这个想法是在指令中公开一个可定制的函数，并让真实的行为被插入。该行为将在调用函数属于父范围的变换范围内被触发。

<div grid="items" columns="3" custom-action="addHello"> //addHello() belongs to the DemoCtrl's scope 
    {{doAction(item) || 'Undefined'}} (name is {{item.name}}) //doAction() belongs to the translcuded scope 
</div> 

而且更新这样的指令的东西：

scope: { 
    ... 
    customAction: "&" 
}, 
link: function($scope, $el, $attrs) { 

    ... 

    $scope.doAction = function(item){ 
     return $scope.customAction(item); 
    } 
} 

DEMO