AngularJS指令动态模板 [英] AngularJS directive dynamic templates

问题描述

对不起，也许这是愚蠢的问题，但我仍然在学习。

我试图与基于范围值differtent模板指令。

这是我到目前为止，我不知道为什么不起作用 http://jsbin.com/mibeyotu完成/ 1 /编辑

HTML元素：

 ＆lt;数据类型内容ATTR =测试1＆GT;＆LT; /数据类型＆GT;
 

指令：

  VAR应用= angular.module（'对myApp'，[]）;app.directive（'的dataType'，函数（$编译）{    VAR testTemplate1 ='＆LT; H1＆GT;＆Test1的LT; / H1＆GT;';
    VAR testTemplate2 ='＆LT; H1＆GT;的Test2＆LT; / H1＆GT;';
    VAR testTemplate3 ='＆LT; H1＆GT;＆Test3的LT; / H1＆GT;';    VAR getTemplate =功能（的contentType）{        VAR模板='';        开关（的contentType）{
            案TEST1：
                模板= testTemplate1;
                打破;
            案测试2：
                模板= testTemplate2;
                打破;
            案TEST3：
                模板= testTemplate3;
                打破;
        }        返回模板;
    };    VAR连接=功能（范围，元素，ATTRS）{
        element.html（getTemplate（scope.content））显示（）。
        $编译（element.contents（））（范围）;
    };    返回{
        限制：E，
        更换：真实，
        链接：链接，
        范围： {
            内容：'='
        }
    };
}）;
 

解决方案

1）你是传递内容的属性在你的HTML。试试这个：

  element.html（getTemplate（attrs.content））显示（）;
 

而不是：

  element.html（getTemplate（scope.content））显示（）;
 

2）指令的数据部分是让编译所以你应该使用别的东西。代替数据类型，例如打探型。

下面是链接：

http://jsbin.com/mibeyotu/6/edit

Sorry, maybe it's stupid question but i'm still learning.

I'm trying to make directive with differtent templates based on scope value.

This is what i done so far which i don't know why doesn't work http://jsbin.com/mibeyotu/1/edit

Html element:

<data-type content-attr="test1"></data-type>

Directive:

var app = angular.module('myApp', []);

app.directive('dataType', function ($compile) {

    var testTemplate1 = '<h1>Test1</h1>';
    var testTemplate2 = '<h1>Test2</h1>';
    var testTemplate3 = '<h1>Test3</h1>';

    var getTemplate = function(contentType){

        var template = '';

        switch(contentType){
            case 'test1':
                template = testTemplate1;
                break;
            case 'test2':
                template = testTemplate2;
                break;
            case 'test3':
                template = testTemplate3;
                break;
        }

        return template;
    }; 

    var linker = function(scope, element, attrs){
        element.html(getTemplate(scope.content)).show();
        $compile(element.contents())(scope);
    };

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

解决方案

1) You are passing content as attribute in your html. Try this:

element.html(getTemplate(attrs.content)).show();

instead of:

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

2) data part of directive is getting compiled so you should use something else. Instead of data-type, e.g. datan-type.

Here is the link:

http://jsbin.com/mibeyotu/6/edit

这篇关于AngularJS指令动态模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！