Kendo网格细节导致父网格刷新

我不明白这是怎么回事。我试图使网格自定义指令，并将使用元素属性来自定义给定的实例。这样我就创建了两个文件

grid-controller.js

app.controller('gridController', ['$scope', function ($scope ) {
    //Initilization code
    $scope.gridOptions = {
        //Setup options
    };
    $scope.detailOptions = function (e) {
        console.log('winning');
        return {
            dataSource: {
                transport: {
                    read: {
                        url: "/detail" + e.OrderNumber + ".json",
                        dataType: 'json'
                    }
                },
                error: function (e) {
                    console.log(e);
                },
                pageSize: true,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false,
            },
            columns: [
                    {
                        field: "ItemCode",
                        label: "lblItemCode",
                        title: ""
                    }, {
                        field: "ItemDesc",
                        label: "lblItemDesc",
                        title: ""
                    }, {
                        field: "QuantityOrdered",
                        label: "lblQuantityOrdered",
                        title: ""
                    }
            ],
            scrollable: false,
            sortable: true
        };
    }
}]);

grid-directive.js

app.directive('grid', function () {
    return {
        // Restrict E for element
        restrict: 'E',
        // Here we setup the template for the code we want to replace our directive
        template: "<div> 'n'
                        <div kendo-grid='grid' 'n'
                             k-options='gridOptions''n'
                             k-data-source='dataSource'>'n'
                        </div> 'n'
                        <script type='text/x-kendo-template''n'
                                id='details'>'n'
                                <div kendo-grid >'n'
                                </div>'n'
                        </script>'n'
                   </div>",
        replace: true,
        scope: {
        },
        controller: "gridController",
        link: function (scope, element, attrs) {
            //Gather some attribute data and set it to the gridOptions object

            if(scope.$eval(attrs.detailsGrid))
            {
                scope.gridOptions.detailTemplate = kendo.template($("#details").html());
                scope.gridOptions.detailInit = scope.detailOptions;
            }
            //More customization code
            scope.dataSource = new kendo.data.DataSource({
                //Setup dataSource options for main grid
            });
        }
    };
});

为简洁起见，我已经排除了很多额外的代码。

我的问题是每当我试图打开一行的细节行打开…关闭…网格似乎刷新了。它几乎看起来像什么东西崩溃了，结果主网格刷新了。

这是与注释部分相关联的plunkr。