1

我已经看到在 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>

4

3 回答 3

2

这是因为模板是在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' : '';
        }
    };
});

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

于 2013-09-20T20:17:28.533 回答
0

当您在链接函数中说 '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;
})
于 2013-09-20T20:18:10.310 回答
0

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

.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);
            });
        }
    };
})
于 2015-09-13T15:57:31.720 回答