Javascript 如何将模板动态切换为AngularJs

我面临着一个我无法独自解决的问题。。 我有一个新闻页面，其中将充满不同类型的新闻（它可以是天气新闻，快讯，…）。每个新闻都有自己的模板

我的angular控制器使用AJAX以Json格式输入新闻，我使用ng repeat将这些新闻显示在用户屏幕上。我还使用了一个指令来实现这一点。 问题是，这是AJAX带来的一个新闻示例：

news: {
    title: "sdijfdslfkndc",
    template: "default_template.html",
    ....
}

在ng中重复：

<div ng-repeat="info in news">
    <info-directive template="info.template"></info-directive>
</div>

---

指令中的

templateUrl

属性可以是一个函数，包含两个参数：

element

和

attributes

，并返回表示元素模板URL的字符串。这样，根据属性，可以显示不同的模板

app.directive('infoDirective', function() {
    return {
            restrict: 'E',
            templateUrl: function(element,attributes){
                switch(attributes.template){
                     case "template1":
                     return "template.html";
                     //and so on
                }
            }
    };
});

我认为它实际上可以这么简单：

app.directive('infoDirective', function() {
    return {
            restrict: 'E',
            templateUrl: function(element,attributes){
                    //if you want to specify the templateURL
                    //directly in the attribute.
                    return attributes.template;
            }
    };
});

准确地解释了你的问题。例如：

资料来源：

在JavaScript中，一切都是字符串——也就是所谓的JS“对象”！当然，处理这些对象的可能性要比处理纯字符串的可能性大。但请记住：HTML/CSS/JS中的所有内容都是字符串，并且将被解释为一个字符串。因此，如果JS中的非对象字符串有“问题”，可以选择几个选项。您可以通过“new ObjectName（）；”创建JS对象，或者如果您只想解释HTML代码，也可以这样做：

app.directive('contentItem', function ($compile) {
var imageTemplate = '<div class="entry-photo"><h2>&nbsp;</h2><div class="entry-img"><span><a href="{{rootDirectory}}{{content.data}}"><img ng-src="{{rootDirectory}}{{content.data}}" alt="entry photo"></a></span></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
var videoTemplate = '<div class="entry-video"><h2>&nbsp;</h2><div class="entry-vid"><iframe ng-src="{{content.data}}" width="280" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
var noteTemplate = '<div class="entry-note"><h2>&nbsp;</h2><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.data}}</div></div></div>';

var getTemplate = function(contentType) {
    var template = '';

    switch(contentType) {
        case 'image':
            template = imageTemplate;
            break;
        case 'video':
            template = videoTemplate;
            break;
        case 'notes':
            template = noteTemplate;
            break;
    }

    return template;
}

var linker = function(scope, element, attrs) {
    scope.rootDirectory = 'images/';

    element.html(getTemplate(scope.content.content_type)).show();

    $compile(element.contents())(scope);
}

return {
    restrict: "E",
    link: linker,
    scope: {
        content:'='
    }
};
});

app.directive（'contentItem'，函数（$compile）{
var imageTemplate='{{content.title}}{{content.description}}}'；
var videoTemplate='{{content.title}}{{{content.description}}'；
var noteTemplate='{{content.title}}{{content.data}}'；
var getTemplate=函数（contentType）{
var模板=“”；
开关（contentType）{
案例“图像”：
模板=图像模板；
打破
案例“视频”：
模板=视频模板；
打破
案例“注释”：
模板=注释模板；
打破
}
返回模板；
}
变量链接器=函数（范围、元素、属性）{
scope.rootDirectory='images/'；
html（getTemplate（scope.content.content_type））.show（）；
$compile（element.contents（））（范围）；
}
返回{
限制：“E”，
链接：链接器，
范围：{
内容：'='
}
};
});

---

正如我上面所说，有多种方法可以达到您的目标，但我认为这种方法非常好。

我对类似问题的回答可能对您很有用：

或者直接去普朗克

app.directive（'myDirective'，[function（）{
返回{
模板：“”，
限制：'E'，
作用域：{template:'='}，
链接：函数（范围、元素、属性、ctrl）{
var baseURL='templates/myDirective'
scope.getTemplate=函数（）{
baseURL=”“//删除此
返回baseURL+scope.template+“.html”
};
}
};
}]);

我建议您为每种类型的新闻创建不同的指令。所以你会有一个关于天气预报的指示，另一个是关于快讯。每一个都将有它的模板，您将插入指令的链接函数，就像它是一个服务一样

angular.module('somemodule', []).factory('link', function () {

  return function (scope, element, attrs, ctrl) {/*some kind of logic*/}; 

}).directive('flashNews', ['link', function (link){
  return {
            templateUrl: 'flash-news.html',
            link: link
  };
}]).directive('weatherNews', ['link', function (link){
  return {
            templateUrl: 'weather-news.html',
            link: link
  };
}]);

和ng重复：

<div ng-repeat="info in news">
    <div ng-if="info.type.weather">
      <weather-news></weather-news>
    </div>
    <div ng-if="info.type.flash">
      <flash-news></flash-news>
    </div>
</div>

---

首先，我想感谢大家的回答，但有一件事

当我这么做的时候

<div ng-repeat="info in news">
    <info-directive template="info.template"></info-directive>
</div>

即使我使用循环中的变量，比如$index，或者使用

{{}

将变量转换为正确的字符串，也没有任何效果。。。例如，如果我在info指令中写入

template=“{{info.template}}”

，那么在Js中，我将获得templateUrl的

{{info.template}}

，而不是默认的\u template.html

---

你有什么想法吗？

我有一个解决问题的办法：

app.directive('infoDirective', function() {

return {
    restrict: 'E',
    scope: {
          info: '=',
    },
    link: function(scope) {
          scope.template = scope.info.template;
    },
    template:"<div ng-include='template'></div>"
};
});

app.directive（'infoDirective'，function（）{
返回{
限制：'E'，
范围：{
信息：“=”，
},
链接：功能（范围）{
scope.template=scope.info.template；
},
模板：“”
};
});

所以

<div ng-repeat="info in news">
    <info-directive template="info.template"></info-directive>
</div>

app.directive('infoDirective', function() {
    return {
        restrict: 'E',
        templateUrl: function(element,attributes){
                console.log(attributes.template);
                return attributes.template;
        }
    };
});

app.directive('infoDirective', function() {

return {
    restrict: 'E',
    scope: {
          info: '=',
    },
    link: function(scope) {
          scope.template = scope.info.template;
    },
    template:"<div ng-include='template'></div>"
};
});

<div ng-repeat="info in news.news">
    <info-directive info="info"></info-directive>
</div>