javascript - AngularJS嵌套指令被插入其假定的父元素之外

我在理解嵌套指令如何与AngularJS一起使用时遇到了麻烦。

var app = angular.module('plunker', []);

app.directive('myTable', function() {
    return {
        restrict: 'E',
        template: [
            '<table class="table table-query" ng-show="queries.length">',
                '<thead>',
                    '<tr>',
                        '<th class="query-name">Name</th>',
                        '<th class="query-status">Status</th>',
                    '</tr>',
                '</thead>',
                '<tbody>',
                    '<my-row ng-repeat="query in queries track by $index"',
                             'query="query">',
                    '</my-row>',
                '</tbody>',
            '</table>',
        ].join(''),
        scope: {
            queries: '='
        },
        controller: function() {
        },
        link: function(scope, element) {
        }
    };
});

app.directive('myRow', function() {
    return {
        restrict: 'E',
        template: [
            '<tr class="query query-status-{{query.status}}">',
                '<td>{{ query.name }}</td>',
                '<td>{{ query.status | uppercase }}</td>',
            '</tr>',
        ].join(''),
        scope: {
            query: '='
        },
        replace: true
    };
});


有人可以向我解释为什么tr不在tbody外面显示吗?
我只想做的就是将一个行指令嵌套在一个表指令中。我很确定我在某处缺少了ng-transclude,但是在哪里?我检查了angular-bootstrap,它们似乎在compile函数中发挥了一些作用。任何帮助深表感谢。

See this corresponding plunkr


最佳答案:

问题与table标签有关。在angularjs渲染之前,浏览器会重新排列myTable模板的html。发生这种情况是因为html无效。

要解决此问题,可以将myRow指令的strict属性更改为'A'并使用如下指令:

...
'<tbody>',
    '<tr my-row ng-repeat="query in queries track by $index"',
        'query="query">',
    '</tr>',
'</tbody>',
...


这样,浏览器就可以看到有效的html,并且可以正常工作。

这是固定的plunkr

译文:来源   文章分类: javascript angularjs angularjs-directive angularjs-ng-repeat

相关文章:

javascript - 无法读取未定义错误的属性“ getTime”

javascript - 节点js和Redis未定义的JSON属性

javascript - mui-datatables:警告:无法为功能组件提供引用。尝试访问此引用将失败。您是要使用React.forwardRef()吗?

javascript - Vista上IE8中的Javascript blur()命令不起作用

javascript - jQuery删除图像

javascript - SVG路径元素.transition()-在哪里添加?

javascript - Javascript:有效实现此效果的内存方法

javascript - 如何正确使用Backbone.js集合显示列表

javascript - 为什么! + [] ='true',我无法测试'!'以任何方式[重复]

javascript - Casperjs脚本在[phantom]启动时被阻止