Angular - 带有动态模板的指令答案

【问题标题】：Angular - Directive with dynamic templateAngular - 带有动态模板的指令
【发布时间】：2015-08-20 12:42:59
【问题描述】：

我用动态模板创建了一个指令，它运行良好。问题是我收到一个错误：

在 Chrome = TypeError: undefined is not a function at forEach.attr
在 Firefox = 错误：element.setAttribute 不是函数

代码如下：

return {
    restrict:'E',
    replace:true,
    scope:{
        content:'@'
    },
    controller:function($scope){
        $scope.getTemplateUrl = function() {
            if($scope.content.match(/<img/i) && !$scope.content.match(/icon-subs/i)) {
                return 'app/templates/_image.html';
            } else if ($scope.content.match(/<a/i)) {
                return 'app/templates/_link.html';
            } else if ($scope.content.match(/<iframe/i)) {
                return 'app/templates/_video.html';
            } else {
                return 'app/templates/_minutes.html';
            }
        }
    },
    template: '<div ng-include="getTemplateUrl()"></div>'
};

指令标签：

<div ng-repeat="lance in contentsArray">
    <icone-timeline data-content="{{lance.content}}"></icone-timeline>
    <div ng-bind-html="lance.content"></div>
</div>

【问题讨论】：

template：应该是templateUrl，也可以看看这个帖子：stackoverflow.com/questions/23609162/…。希望对你有帮助
Jax，据我所知，当我们指向“template/file.html”之类的文件时，会使用 TemplateUrl，在这种情况下，我使用的是 HTML 代码和平...跨度>
没错！我的错。
尝试从标记中取出 {{}}。我试着把它拿出来，我没有得到那个错误
Jacky，我想取出来，但我得到了同样的错误。

标签： javascript html angularjs caching angularjs-directive

【解决方案1】：

经过长时间的运行，我找到了解决方案，问题是：

replace:true,

删除这部分后问题就解决了。

【讨论】：