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

Question

我想将内容动态加载到 Angular 应用中。

内容将从 html 模板创建，并且通过 php 加载的数据与 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