AngularJS:指令中templateUrl的奇怪行为(模板效果很好)

月亮

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

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

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

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

myButton2使用:
template:' <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;
                        }
                    };
                }
            ])
    ;

结果如下:
正确的结果

MM猎人

有可能是一个已知的问题时使用ng-repeattemplateUrlng-ifreplace:true在虽然它被认为是固定多次同一时间。

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

ng-ifng-repeat是angular中的两个特殊指令,同时,in中的DOMtemplateUrl异步加载并暂停编译。这种复杂的情况将以某种方式产生问题。

为避免这种情况,只需使用ng-show代替ng-iftemplate代替它templateUrl,或者为templateUrl设置脚本模板以将其放入中$templateCache

已知问题参考(或者您可以自己搜索更多Google)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章