AngularJS：指令中templateUrl的奇怪行为（模板效果很好）

Question

我有两个指令，一个是表格，另一个是按钮。
但是当我在按钮指令中使用 templateUrl 时，所有按钮都显示在表格的同一行中。
但是“模板”可以很好地工作。
有人可以帮忙吗？

这两个 Demo 的 plunker 如下：
http://plnkr.co/edit/9EaRfrSQggPETrXhNZvq?p=preview : using templateUrl
http://plnkr.co/edit/UHzEpugxtM6JjoNrUd9X?p=preview : using template

指令 myButton1 和 myButton2 之间的唯一区别是：
myButton1 使用 :
templateUrl: function (element, attrs) {
返回 TEMPLATE_ACTION;
}
“actionTemplate.html”的内容是：

<div ng-if="config !== undefined">b</div><br/><br/>

myButton2 使用：
模板：'<div ng-if="config !== undefined">b</div>'，

    angular.module('myApp', [])
            .controller('MyController', ['$scope', function ($scope) {
                $scope.data = [
                    {name: 'field1', config: {type: 'config1'}},
                    {name: 'field2', config: {type: 'config2'}}
                ];
            }])
            .directive('myGrid', ['$compile', function($compile) {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '' +
                        '<table>' +
                        '<tbody>' +
                        '<tr ng-repeat="item in data">' +
                        '    <td><div><my-button2 config="item.config"></my-button2></div></td>' +
                        '    <td>{{item.name}}</td>' +
                        '</tr>' +
                        '</tbody>' +
                        '</table>',
                    scope: true
                }
                }])
            .directive("myButton1", ["$compile",
                function ($compilee) {
                    var TEMPLATE_ACTION = 'views/actionTemplate.html';
                    return {
                        restrict: "E",
                        replace: true,
                        scope: true,
                        templateUrl: function (element, attrs) {
                            return TEMPLATE_ACTION;
                        },
                        link: function (scope, iElement, iAttrs) {
                            var config = scope.$eval(iAttrs.config);
                            scope.config = config;
                        }
                    };
                }
            ])
    ;

结果是两个按钮显示在同一行，如下图：

但是在指令中使用“模板”，效果很好：

        angular.module('myApp', [])
            .controller('MyController', ['$scope', function ($scope) {
                $scope.data = [
                    {name: 'field1', config: {type: 'config1'}},
                    {name: 'field2', config: {type: 'config2'}}
                ];
            }])
            .directive('myGrid', ['$compile', function($compile) {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '' +
                        '<table>' +
                        '<tbody>' +
                        '<tr ng-repeat="item in data">' +
                        '    <td><div><my-button2 config="item.config"></my-button2></div></td>' +
                        '    <td>{{item.name}}</td>' +
                        '</tr>' +
                        '</tbody>' +
                        '</table>',
                    scope: true
                }
                }])
            .directive("myButton2", ["$compile",
                function ($compilee) {
                    return {
                        restrict: "E",
                        replace: true,
                        scope: true,
                        template: '<div ng-if="config !== undefined">b</div>',
                        link: function (scope, iElement, iAttrs) {
                            var config = scope.$eval(iAttrs.config);
                            scope.config = config;
                        }
                    };
                }
            ])
    ;

结果如下：

Answer 1

在同时使用ng-repeat、templateUrl、ng-if 和replace:true 时可能存在一个已知问题，尽管据说已修复多次。

可能是角度内部的transclude 逻辑存在问题。

ng-if和ng-repeat是angular中的两个特殊指令，同时templateUrl中的DOM被异步加载并暂停编译。这种复杂的情况会以某种方式产生问题。

为避免这种情况，只需使用ng-show 代替ng-if，或使用template 代替templateUrl，或者为templateUrl 设置一个脚本模板以将其放入$templateCache。

已知问题参考（或者你可以自己google更多）

https://github.com/angular/angular.js/issues/14326https://github.com/angular/angular.js/issues/11855https://github.com/angular/angular.js/issues/7183