AngularJS：在包含嵌套ng-repeat的transcluded指令中访问父作用域

Question

I am working on a basic directive that creates a grid of divs that fits with Bootstrap. You give it a collection of items and optionally specify the number of columns it can contain. It is transcluded so you can define the template displayed for each item.

I break the collection into rows, and then have nested repeaters where the first creates each row, and the second creates each column (and then transcludes the content for that item). It works well in this simple scenario.

 .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);
                    }

                });
            }
    };
  }]);

The problem is in the transcluded content, I sometimes need to invoke a function or access an item from the parent scope. For example, say I want to format a display name, or add a click handler.

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

Because this creates multiple transcluded scopes, I have to unnest the scope by chaining $parent until I eventually find it.

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

This also works, but it's awkward and violates law of Demeter, which is important because if I change how this works internally in the future, it'd potentially break the transcluded content. How can I improve this to avoid this issue?

Fully functional plunk .

Answer 1

Use delegate pattern. The idea is to expose a customizable function in the directive and let the real action to be plugged in. The action will be triggered inside the transcluded scope calling the function belongs to the parent scope.

<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>

And update the directive to something like this:

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

    ...

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

DEMO