使用$ .get加载动态内容后，AngularJS指令编译

Question

我想动态地将内容加载到角度应用程序中。

内容将从html模板创建，数据通过php加载async与jQuery中的$ .get函数。

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) {
        }
    }
})

DEMO on PLNKR

有关更多信息，请参阅AngularJS Comprehensive Directive API Reference - 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 on PLNKR