0

I am creating a directive that will generate the HTML elements automatically according to data that received from the server.

Here is angularjs code:

(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="row top-buffer">' +
                                               '<input type="text" placeholder=". . ." ng-model = ' + parameter.ObjectName + ' class="form-control">' +                                            
                                                  '<div class="input-group-btn">' +
                                                  '<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" ng-click = "foo()" aria-haspopup="true">' +
                                                         '<i class="glyphicon glyphicon-filter"></i>' +
                                                '</button>' +
                                                '</div>' +
                                                '</div>' +
                                                '</div>');
                            break;
                        case 'DateTime':
                                   el.append('<div class="row top-buffer">' +
                                                '<my-datepicker placeholder="dd/mm/yyyy" ng-model = ' + parameter.ObjectName + ' class=""></my-datepicker>' +
                                                '<div class="input-group-btn">' +
                                                '<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" ng-click = "foo()" aria-haspopup="true">' +
                                                    '<i class="glyphicon glyphicon-filter"></i>' +
                                                 '</button>' +
                                          '</div>' +
                                        '</div>');
                            break;
                    }
                });
            $compile(el)(scope);
            element.append(el);
            });
        }
    }
        return directive;
    }
})();

After the angular.forEach operator iterated on all items in the parameters variable and all DOM elements is loaded ,all input HTML elements displayed in view.

When I use F12 to Inspect Element I see this HTML code:

enter image description here

As you can see every HTML element that was created in switch, binded with help of ng-model directive to the $scope property.

But, when I watch $scope in sources using the Developer Tool (F12):

I see this list:

enter image description here

The list above displays all properties of the $scope, and as you can see it does not have property of input types the Clients and InspectionFrequencies but $scope does have property InspectionReviews of my custom directive my-datepicker .

For some reason Clients and InspectionFrequencies does not created in $scope.

Any idea why the Clients and InspectionFrequencies does not created in $scope?

Michael
  • 13,950
  • 57
  • 145
  • 288
  • 1
    The `$compile` will be running before the HTTP request has completed – Phil Nov 22 '15 at 22:46
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Phil Nov 22 '15 at 22:47
  • As Phil said put the $compile call into the then function block. Then it should work. – Christian Steinmann Nov 22 '15 at 23:00

0 Answers0