AngularJS 指令中的动态模板（不是 templatUrl）答案

【问题标题】：Dynamic template in AngularJS Directive (Not templatUrl)AngularJS 指令中的动态模板（不是 templatUrl）
【发布时间】：2013-09-20 20:11:09
【问题描述】：

我已经看到在 Angular 的指令中拥有动态 templateUrl 的能力，但在研究时我还没有看到动态模板。

.directive('col', function () {
    var template = '<div class="one" ng-transclude></div>';
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: template,
        link: function (scope, ele, attrs) {
            if (attrs.two !== undefined) {
                template = '<div class="two" ng-transclude></div>';
            } else if (attrs.three !== undefined) {
                template = '<div class="three" ng-transclude></div>';
            } else {
                template = '<div class="one" ng-transclude></div>';
            }
            console.log(template);
        }
    };
})

HTML：

<col three>Three</col>
<col two>Two</col>
<col>Nothing</col>

控制台显示正确：

<div class="three" ng-transclude></div>
<div class="two" ng-transclude></div>
<div class="one" ng-transclude></div>

但是输出显示默认/初始<div class="one" ng-transclude></div>

【问题讨论】：

您可能希望像这个问题stackoverflow.com/questions/10629238/… 一样使用compile 功能
@nuclearghost +1，这很好。谢谢。我必须记住这一点以备将来使用。

标签： angularjs angularjs-directive

【解决方案1】：

这是因为模板是在 link 函数被触发之前收集的，如果你只是想改变类，那么就做这样的事情。

.directive('col', function () {
    var template = '<div class="{{class}}" ng-transclude></div>';
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: template,
        link: function (scope, ele, attrs) {
            $scope.class = attrs.three ? 'three' : attrs.two ?'two' : attrs.one ? 'one' : '';
        }
    };
});

除此之外，我不知道你还能如何完成它。

【讨论】：

通过一些小的调整，这个工作完美，谢谢。 $scope 已更改为 scope 并且您的三元运算符在我的实例中无法正常工作，但这可能是我的问题。

【解决方案2】：

当您在链接函数中说 'template = 'xxx' 时，它引用的是您的模板变量，而不是返回对象的属性。试试这个：

.directive('col', function () {
    var result = {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: template,
        link: function (scope, ele, attrs) {
            if (attrs.two !== undefined) {
                result.template = '<div class="two" ng-transclude></div>';
            } else if (attrs.three !== undefined) {
                result.template = '<div class="three" ng-transclude></div>';
            } else {
                result.template = '<div class="one" ng-transclude></div>';
            }
            console.log(result.template);
        }
    };
    return result;
})

【讨论】：

【解决方案3】：

如果模板是基于属性动态构造的，那么你可以提供一个模板函数来传递属性

.directive('col', function () {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: function(element, attrs) {
            var template = null;

            if (attrs.two !== undefined) {
                template = '<div class="two" ng-transclude></div>';
            } else if (attrs.three !== undefined) {
                template = '<div class="three" ng-transclude></div>';
            } else {
                template = '<div class="one" ng-transclude></div>';
            }

            return template;
        },
        link: function (scope, element, attrs) {

        }
    };
})

如果模板是基于模型动态构建的，则涉及更多。请注意，嵌入是显式完成的，而不是使用 ng-transclude 指令。

.directive('col', function () {
    return {
        restrict: 'E',
        scope: {
            myVariable: '='
        },
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, nullController, transclude) {
            var template = null;

            if (scope.myVariable == 'two') {
                template = '<div class="two"></div>';
            } else if (scope.myVariable == 'three') {
                template = '<div class="three"></div>';
            } else {
                template = '<div class="one"></div>';
            }

            element.html(template);
            $compile(element.contents())(scope);

            transclude(scope.$parent, function(clone, scope) {
                element.children().append(clone);
            });
        }
    };
})

【讨论】：