如何为ng-grid使用由指令属性决定的网格选项的指令包装器?

Question

我正在尝试为ng-grid创建一个可重用的指令包装器，在那里我可以通过使用属性来应用ng-grid选项的位置。

下面是代码的框架，使非常接近我想要的:

angular.module('myApp').directive('grid', function() {
    return {
        restrict: 'E',
        template: '<div class="gridStyle" ng-grid="someObject.gridOptions"></div>',
        link: function(scope, element, attributes) {
             // no code here necessary, to use the hard-coded ng-grid options
        }
    }
}]);

我想做的是通过使用属性为ng-grid提供变量，类似于:

<grid dataLocation="someObject.gridOptions"></grid>

我尝试使用多种方法的编译和链接选项，包括读取属性，然后使用element.html()方法更新html以将ng-grid属性设置为"someObject"。以及使用{{someScopeVariable}}，并将scope.someScopeVariable设置为"someObject. gridOptions"。gridOptions"中的链接函数。我已经使用chrome的html检查器验证了div的属性看起来是正确的，但是我没有能够让项目显示在我的页面上。

我怀疑我遇到了问题，因为ng-grid已经是一个编译的指令。有什么办法能让我成功吗?我已经尝试了大量的编译和链接方法，但没有成功。

Answer 1

要访问原始模板的属性，directive的template选项应该定义为如下函数:

angular.module('myApp').directive('grid', function() {
    return {
        restrict: 'E',
        template: function(element, attrs){
            return '<div ng-grid="' + attrs.dataLocation + '"></div>';
        }
    };
});

你的HTML保持不变:<grid dataLocation="someObject.gridOptions"></grid>