Create directives dynamically

Vote count:

0

I'm quite new to AngularJS. I think I have studied most of the basics. I want to create sort of a desktop with the items shown on the desktop dynamically loaded from a database via $http. For the items I have created a directive that wraps the display of a title and an icon. Now my problem is that I don't know how to create the directive instances dynamically. My controller looks like this:

$scope.loadItems = function () {
    $http.get('api/StartcenterItems').
    success(function (data) {
        var itemsContainer =  angular.element(document.querySelector("#itemsContainer"));

        for (var i = 0; i < data.length ; ++i) {
            itemsContainer.append('<hl-start-center-item title="Test"></hl-start-center-item>');
        }
    }).
    error(function (data) {
        alert(data);
    });

where hl-start-center-item is the directive. The problem is that the html code for the directive gets appended but it gets not compiled by Angular and is not displayed by the browser. What do I have to do to make the directive correctly displayed? If you need more code to reproduce the problem please tell me.

Thanks for any idea, Nicolas

asked 50 secs ago

NicolasR

8

Create directives dynamically