Question

我试图为ng-table指令创建包装指令。我的包装器应该在应用第一个指令的同一元素上实例化ng-table指令，并向ng-table添加一些自定义配置。

我正在使用以下代码来创建ng-table指令。

angular.module('main')
.directive('mkTable', function($compile) {
    return {
        'link': function ($scope, element, attributes) {
            element.removeAttr('mk-table'); // Must remove attribute because of recursion
            element.attr('ng-table', 'tableParams');

            $compile(element)($scope);
        }
    }
})

它确实创建了ng-table（你可以通过分页看到它），但它不会显示任何数据。如果检查控制台输出，则可以看到调用了getData()函数。

我认为问题在于编译子元素（tr, td）并将其绑定到新的ng-table范围，但我无法找到解决方案。

演示：http://plnkr.co/1aEAdr2ugl39WG9Ay0vN

Answer 1

我认为问题是ng-repeat tr元素正在被编译几次，所以我做了一个小顽皮的技巧:) -insert“fake”来打破Angular绑定 -

<tr fake-ng-repeat="user in $data">
  <td data-title="'Name'">{fake{user.name}}</td>
  <td data-title="'Age'">{fake{user.age}}</td>
</tr>

然后在指令中在重新编译之前删除所有“假（s）”：

element.html(element.html().replace(/fake-?/g, ''));

Demo

虽然它有效，但我相信这是一个肮脏的把戏。

Answer 2

经过大量的实验，我发现了它。解决方案是使用链接的编译功能。

angular.module('main')
.directive('mkTable', function($compile) {
    return {
        compile: function(element, attributes) {
            element.removeAttr('mk-table');
            element.attr('ng-table', 'tableParams');

            var compileFn = $compile(element);

            return function($scope, element, attributes) {
                compileFn($scope);
            }
        }
    }
})

更新了演示：http://plnkr.co/vL4kg0KVp4GYEDpOlIrm

从同一元素上的另一个指令动态创建ng-table指令

2 个答案: