Question

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

下面列出了这两个演示的内容：
http://plnkr.co/edit/9EaRfrSQggPETrXhNZvq?p=preview：使用templateUrl
http://plnkr.co/edit/UHzEpugxtM6JjoNrUd9X?p=preview：使用模板

指令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 1}}。

已知问题参考（或者您可以自己谷歌更多）

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

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

1 个答案: