AngularJS指令动态模板

前端之家收集整理的这篇文章主要介绍了AngularJS指令动态模板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对不起,也许这是一个愚蠢的问题,但我还在学习。

我试图使用基于范围值的不同模板的指令。

这是我做到目前为止,我不知道为什么不工作http://jsbin.com/mibeyotu/1/edit

Html元素:

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

指示:

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)您在HTML中传递内容作为属性。尝试这个:
element.html(getTemplate(attrs.content)).show();

代替:

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

2)指令的数据部分正在编译,所以你应该使用别的东西。而不是数据类型,例如datan类型。

链接在这里:

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

原文链接:https://www.f2er.com/angularjs/146606.html

猜你在找的Angularjs相关文章