Как сделать динамический (переменный) контент с angularjs?

Question

Моя первая проблема, я не знаю, сделать динамический шаблон в ветке с AngularJs.Цель моего проекта, а затем сделать приложение-редактор страниц.Итак, прежде всего: - Я получаю файл JSON в следующей структуре - Я начал обрабатывать содержимое файла JSON, но я застрял в обработке.Могу ли я попросить хорошее решение?Большое спасибо!

/* Json file */

$scope.form={
'content': 
    [{   
        "name"  : "text_right",
        "img"   : "nope.jpg",
        "text"  : "<span>text text text</span>"           
    },
    {   
        "name"  : "text_left",
        "text"  : "<span>text text text</span>",
        "img"   : "nope.jpg"
    },
    {
        "name"  : "text_both",
        "textL"  : "<span>text text text</span>",
        "textR"  : "<span>text text text</span>"
    },
    {
        "name"  : "special",
        "text"  : "<div>text text text</div>"
    }]
};

/* HTML content */

<div class="col-12" ng-repeat="(key, value) in form.content">
    [[ initTemp(key) ]]
</div>

/* AngularJs */
$scope.initTemp = function($key){
    let html;

    if(form.content[$key].name ==  "text_both"){
        html = textBoth();
    }
    if(form.content[$key].name == "text_left"){
        html = textLeft();
    }
    return $compile(html)($scope);
}
function textBoth($key){
    return `
        <div class="col-6"><input ng-model="form.content.${$key}.textL"></div>
        <div class="col-6"><input ng-model="form.content.${$key}.textR"></div>
    `;
}
function textLeft($key){
    return `
        <div class="col-6"><input ng-model="form.content.${$key}.text"></div>
        <div class="col-6"><input ng-model="form.content.${$key}.img"></div>
    `;
}

Answer 1

Код, который собирает DOM из данных, лучше всего выполнять в пользовательской директиве:

<div class="col-12" ng-repeat="item in form.content">
     ̶[̶[̶ ̶i̶n̶i̶t̶T̶e̶m̶p̶(̶k̶e̶y̶)̶ ̶]̶]̶
     <custom-directive item="item"></custom-directive>
</div>

app.directive("customDirective", function($compile) {
    return {
        link: postLink,
    };
    function postLink (scope,elem,attrs) {
        var item=scope.$eval(attrs.item);
        var html = `
            <div>
               <img src=${item.img} />
               <!-- ... -->
            </div>
        `;
        var linkfn = $compile(html);
        elem.append(linkfn(scope)); 
    }
})

Для получения дополнительной информации см.

• Руководство разработчика AngularJS - Создание пользовательских директив