Директива AngularJS компилируется после загрузки динамического содержимого с помощью $ .get

Question

Я хочу динамически загружать контент в угловое приложение.

Контент будет создаваться из HTML-шаблонов и данных, получаемых через php, загруженный асинхронно с помощью функции $ .get из jQuery.

var app = angular.module('contentApp', []);
app.directive("contentListContainer", function($compile) {  
    return {
        link: function($scope, $element) {

            //def
            var templateData1;
            var databaseData;

            //get
            var getTemp1 = $.get("/lib/templateData1.html", function(data, status) {
                templateData1 = data;
            });

            var getData = $.get("/lib/getData.php?type=all", function(data, status) {
                databaseData = JSON.parse(data);
            });

            //build
            $.when(getTemp1, getData).then(function() {
                var uiData = "";

                //combine templates using database Data and build HTML DOM string

                //uiData string example: "<div><div>{{var1}}</div><div>{{var2}}</div></div>"
                $element.html(uiData);
                $compile($element.contents())($scope); 
            });
        }
    }
});

Последняя строка DOM содержит некоторые {{}} выражения, которыми я хочу управлять с помощью углового контроллера.

app.controller('contentCtrl', function($scope) {
    $scope.var1 = 5;
    $scope.var2 = 10;
});

Проблема: выражения не будут скомпилированы и использованы угловым контроллером, они толькоотображается как обычный текст.

Answer 1

Вместо использования $.get и $compile, просто используйте свойство templateUrl в директиве:

app.directive("contentListContainer", function($compile) {  
    return {
        templateUrl: "lib/templateData1.html",
        link: function($scope, $element) {
        }
    }
})

ДЕМО на ПЛНКР

Для получения дополнительной информации см. Справочник по API AngularJS - templateUrl

---

Обновление

Но мне нужно изменить шаблон перед его отображением на экране, поскольку шаблон будет динамически изменяться (при загрузке) на основе данных базы данных.

Вместо использования $.get лучше использовать $ http.get . Метод $.get не интегрирован с контекстом выполнения платформы AngularJS и его циклом дайджеста.

app.directive("contentListContainer", function($compile,$http) {  
    return {
        //templateUrl: "lib/templateData1.html",
        link: function($scope, $element) {
            var uiData = "";
            $http.get("lib/templateData1.html")
            .then(function(response) {
                uiData = response.data;
                //uiData string example: "<div><div>{{var1}}</div><div>{{var2}}</div></div>"
                $element.html(uiData);
                $compile($element.contents())($scope);
            });
        }
    };
})

AngularJS изменяет обычный поток JavaScript, предоставляя собственный цикл обработки событий. Это разбивает JavaScript на классический и AngularJS контекст выполнения. Только операции, которые применяются в контексте выполнения AngularJS, выиграют от привязки данных AngularJS, обработки исключений, отслеживания свойств и т. Д.

$compile работает правильно с $http.get.

DEMO # 2 на PLNKR