如何使templateUrl为null或未定义或空字符串的指令

How to have a directive having templateUrl as null or undefined or empty string

本文关键字：字符串 指令 未定义 templateUrl null 何使      更新时间：2023-09-26

我正在尝试实现一个针对下拉菜单的通用指令。我通常会传递具有大模板的菜单的templateUrl。但也有一些小菜单，比如一个"ul"标签中的3个"li"。我不想使用templateUrl来调用它们的单独模板，我只想使用实现指令的元素内部的html来实现功能。

return {
        restrict : 'A',
        templateUrl: function(element,attrs){
            return (attrs.templateUrl)? attrs.templateUrl : null;
        },
        scope:"",
        link: function (scope, element, attrs) {
        }
}

这就是我正在做的，但由于它想要加载模板，所以出现了错误。这附近有什么工作？

Aim=如果作为templateUrl传递，则呈现模板；如果templateUrl未作为属性传递，则仅使用指令元素中的元素

我正在制作自己的框架，遇到了和您相同的情况。因此，我编写了一个执行动态模板url的模块。如果没有定义元素或默认的templateUrl，它会将元素的内部内容作为字符串存储在用随机生成的键命名的$templateCache服务中，然后如果将其动态设置为指令的templateUrl属性，则其元素的内容将与最初编写的内容相同。我不知道这是否是一个完美的解决方案，但对我来说已经足够了：

模块（对不起，我无法主持它，我的工作的信息安全阻止了所有）

(function(){
    var moduleName = "templateManager",
        serviceName = "TemplateManager",
        NAMES = {
            ATTR_NAME: "templateUrl",
            TEMPLATE: "templateUrl",
        };
    angular.module(moduleName, [])
    .provider(
        serviceName,
        function(){
            function randomSelector(){
                var str = ""; 
                for(var i = 0; i < 10; i++)
                    str += String.fromCharCode(Math.floor(Math.random() * (91-65) + 65));
                return str + "_" + String(Math.random().toFixed(5)).split(".")[1];
            }
            this.$get = ["$templateCache",function($templateCache){
                var serv = {};
                //Private
                function noTpl(contents){
                    var selector = randomSelector();
                    $templateCache.put(selector, contents);
                    return selector;
                }
                //Public
                serv[NAMES.TEMPLATE] = function(templateUrl){
                    return function(tElem, tAttrs){
                        var defaultTpl = angular.isDefined(templateUrl) ? (angular.isFunction(templateUrl) ? templateUrl.apply(this,arguments) : templateUrl) : undefined,
                            elementTpl = angular.isDefined(tAttrs[NAMES.ATTR_NAME]) ? tAttrs[NAMES.ATTR_NAME] : undefined;
                        return elementTpl || defaultTpl || noTpl(tElem.html());
                    }
                }
                return serv;
            }]
        }
    );
})();

用例

<script>
angular.module("test",["templateManager"])
.directive(
    "dynTpl",
    ["TemplateManager",function(TemplateManager){
        return {
            restrict: "E",
            templateUrl: TemplateManager.getTemplateUrl(
                function(tElem, tAttrs){ //only for testing
                    if(tAttrs.testTpl === "default")
                        return "http://www.w3schools.com/jquery/demo_test.asp";
                    return undefined; 
                }),
        }
    }]
)
</script>
<body ng-app="test">
<dyn-tpl><p>Content!!</p></dyn-tpl> <!-- Should show: Content!! -->
<dyn-tpl test-tpl="default"><p>Content!!</p></dyn-tpl> <!-- Should show: This is some text from an external ASP file. -->
<dyn-tpl template-url="http://www.w3schools.com/jquery/demo_test_post.asp"><p>Content!!</p></dyn-tpl> <!-- Should show: Dear . Hope you live well in . -->
</body>

正如您所看到的，此模块始终使用默认情况下由用户或从包含原始内容的缓存中定义的templateUrl。

我希望我能帮上忙，如果我的英语不好，我很抱歉。

使用templateCache和本地模板变量会有帮助吗？当您声明templateURL时，$templateCache将在执行任何http请求之前使用如果它什么都不返回，您可以设置一个空模板，或者其他什么。

当宣布你的指令时，你可以做：

angular.module('<yourmodule>').directive('<yourdirective',[$templateCache, function($templateCache){
   var myTemplate = $templateCache.get('anURL') || "";
   return {
      restrict: 'A',
      //other declarations
      template: myTemplate
   }
}]);

希望这能有所帮助。

看起来这个网站提供了解决方案，您应该获得html，然后使用$compile()函数：http://onehungrymind.com/angularjs-dynamic-templates/

app.directive('contentItem', function ($compile) {
    var linker = function(scope, element, attrs) {
        if (scope.contentTemplate !== undefined){
            element.html(getTemplate(scope.contentTemplate)).show();
        }
        $compile(element.contents())(scope);
    }
});
相关文章：