Question

我正在创建一个指令，它将根据从服务器收到的数据自动生成HTML元素。

这是angularjs代码：

(function () {
    "use strict";

    angular.module("workPlan").directive("myGenericFilter", ["$compile", "$http", "config", myGenericFilterData]);

    function myGenericFilterData($compile, $http, config) {
        var directive = {
            restrict: "E",
            scope: {
                filterParams: "=filterparameters",
            },

            //templateUrl: config.baseUrl + "app/workPlan/templates/workPlanList.tmpl.html",
            template: '<div></div>',
            controller: "genericFilterDataController",
            controllerAs: "filter",

            link: function (scope, element) {
                var parameters;

                var el = angular.element('<span/>');
                $http.post(config.baseUrl + "api/FilterConfigurations/", scope.filterParams).then(function (result) {
                    parameters = result.data;
                    angular.forEach(parameters, function (parameter, key) {
                        switch (parameter.ValueType) {
                            case 'Int32':
                                el.append('<div class="form-group">' +
                                           '<div class="">' +
                                              '<span class="view"></span>' +
                                              '<input type="text"' + 'id =' + parameter.ObjectName + ' class="form-control">' +
                                           '</div>' +
                                           '</div>');
                                break;
                            case 'DateTime':
                                el.append('<div class="form-group">' +
                                               '<span class="view"></span>' +
                                               '<my-datepicker placeholder="dd/mm/yyyy" class=""></my-datepicker>' +
                                           '</div>');
                                break;
                        }
                    });
                });
                $compile(el)(scope);
                element.append(el);
            }
        }
        return directive;
    }
})();

正如您所看到的，我从服务器获取数据并根据交换机中选择的parameter.ValueType适当的案例。

angular.forEach运算符迭代parameters变量中的所有项并且加载了所有DOM元素后，除my-datepicker自定义指令外，显示所有输入HTML元素。当我使用F12 Inspect Element 时，我会看到所有元素的HTML代码（包括my-datepicker）。

这是它的样子：

但是在my-datepicker视图中没有显示，这里看起来如何：

my-datepicker是自定义指令，它在注入我项目中所有模块的公共模块中定义。

知道为什么my-datepicker没有在视图中显示？

Answer 1

在设置el的内容之前编译el。请记住$ http请求是异步然后放

$compile(el)(scope);
element.append(el);

进入回调

 link: function (scope, element) {
    var parameters;

    var el = angular.element('<span/>');
    $http.post(config.baseUrl + "api/FilterConfigurations/", scope.filterParams).then(function (result) {
        parameters = result.data;
        angular.forEach(parameters, function (parameter, key) {
            switch (parameter.ValueType) {
                case 'Int32':
                    el.append('<div class="form-group">' +
                               '<div class="">' +
                                  '<span class="view"></span>' +
                                  '<input type="text"' + 'id =' + parameter.ObjectName + ' class="form-control">' +
                               '</div>' +
                               '</div>');
                    break;
                case 'DateTime':
                    el.append('<div class="form-group">' +
                                   '<span class="view"></span>' +
                                   '<my-datepicker placeholder="dd/mm/yyyy" class=""></my-datepicker>' +
                               '</div>');
                    break;
            }
         });

       $compile(el)(scope);
       element.append(el);
    });
}

生成html指令

1 个答案: