angularjs为详细视图加载不同的模板

时间:2014-11-06 07:08:31

标签: angularjs

我希望你能帮助我。

我想知道如何在angularjs中做第二组模板。 我有拇指模板 - 现在我想添加一组模板以供详细查看。

这就是目前的情况:

模板在此处加载<span ng-include="setUrl()"></span>

我的脚本如下所示:

myApp.directive('contentItem', function () {

    templates = {
      image: 'image.html',
      event: 'event.html',
      article: 'article.html',
      ad: 'ad.html',
      discount: 'discount.html',
      video: 'video.html'

    }

    var linker = function(scope, element, attrs) {
        scope.setUrl = function(){
          return templates[scope.item.content_type];
        }

    }

    return {
        restrict: "E",
        replace: true,
        link: linker,
        scope: {
          item: '=',
          items: '='
        },
        templateUrl: 'main.html'
    };
});

我希望获得详细观点的观点:

图像detail.html

事件detail.html

物品detail.html

...

如果我将在submission-full.html中

我应该如何加载详细视图?

实例就在这里 - &gt; Plunker

提前致谢!

1 个答案:

答案 0 :(得分:0)

如果您的main.html看起来像这样:

<div ng-include="setURL(item.template_name)"></div>

然后它将加载在范围的item.template_name中指定的模板名称,该指令应该是指定给它的item。您可能需要稍微修复setURL,以便它返回服务器上的实际完整路径。

请记住,ng-include表达式不是名称。这就是为什么在指定硬编码模板文件时需要在字符串中使用一组额外的单引号。