Question

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

内容将从HTML模板创建，数据将通过jQuery的$ .get函数通过php异步加载。

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

更新

但是我需要在屏幕上显示模板之前对其进行修改，因为模板将根据数据库数据进行动态更改（在加载时）。

最好使用$http.get，而不要使用$.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

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

1 个答案:

更新