Question

我需要开发类似'网络内容播放器'的东西。我把脚本代码，HTML模板和其他数据存储在数据库中。现在我已经得到它们并将它们组合起来生成一个新的HTML页面。我如何将event.content注入页面并工作。 ...

预览http://onehungrymind.com/demos/angular-dynamic-templates/ @Lukas Ruebbelke

https://github.com/simpulton/angular-dynamic-templates @Lukas Ruebbelke

app.js和index.html

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

app.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});

app.constant('URL', 'data/');

/*get data*/
app.factory('DataService', function ($http, URL) {
    var getData = function () {
        return $http.get(URL + 'content.json');
    };

    return {
        getData: getData
    };
});

/*get template*/
app.factory('TemplateService', function ($http, URL) {
    var getTemplates = function () {
        return $http.get(URL + 'templates.json');
    };

    return {
        getTemplates: getTemplates
    };
});

/*get html events such as button click()*/
app.factory('EventService', function ($http, URL) {
   var getEvents = function(){
       return $http.get(URL + 'event.json');
   };

    return {
        getEvents : getEvents
    };
});

/*main controller*/
app.controller('ContentCtrl', function (DataService) {
    var ctrl = this;

    ctrl.content = [];

    ctrl.fetchContent = function () {
        DataService.getData().then(function (result) {
            ctrl.content = result.data;
        });
    };

    ctrl.fetchContent();
});

app.directive('contentItem', function ($compile, TemplateService,EventService) {
    var getTemplate = function (templates, contentType) {
        var template = '';

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

        return template;
    };



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

        TemplateService.getTemplates().then(function (response) {
            var templates = response.data;

            element.html(getTemplate(templates, scope.content.content_type));

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

    /*var compiler = function (scope, element, attrs) {
       var scripHtml =  EventService.getEvents().then(function (response) {
            var events = response.data;
            return events.content;
        });

        var scriptTag = angular.element(document.createElement("script"));
        scriptTag.text(scripHtml);
        element.append(scriptTag);
    };*/

    return {
        restrict: 'E',
        link: linker,
        scope: {
            content: '='
        }
        //,
        //compile:compiler
    };
});




<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <title>AngularJS Dynamic Template</title>

    <script type="text/javascript" src="vendor/jquery.min.js"></script>
    <script type="text/javascript" src="vendor/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

    <link rel="stylesheet" href="css/layout.css">
</head>
<body>

<div id="container" ng-controller="ContentCtrl as ctrl">
    <content-item ng-repeat="item in ctrl.content" content="item" scripts="scripts"></content-item>
</div>

</body>
</html>

content.json

[
{"content_type" : "image", "title" : "Image 00", "data" : "temp-photo.jpg"},
{"content_type" : "video", "title" : "Video 00", "data" : "http://player.vimeo.com/video/37176398"},
{"content_type" : "notes", "title" : "Notes 00", "data" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar pretium felis. Vivamus nibh felis, condimentum sit amet laoreet luctus, posuere auctor lorem. Nullam malesuada."},
{"content_type" : "button", "title" : "ss 03", "data" : "aaaaa"}]

templates.json

{
  "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>",
  "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>",
  "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>",
  "butnTemplate":"<div><button ng-click='{{content.name}}'>button</button></div>"
}

自己添加event.json

{
    "name":"click()",
    "content":"function click(){alert('sss')};"
}

使用AngularJS动态创建内容

0 个答案: