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="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;
    }
})();

angular.forEach运算符迭代parameters变量中的所有项并且加载了所有DOM元素后，所有输入HTML元素都显示在视图中。

当我使用F12来检查元素时，我会看到这个HTML代码：

正如您可以看到在switch中创建的每个HTML元素，借助于ng-model指令绑定到$ scope属性。

但是，当我使用开发者工具（F12）在源中观察$ scope时：

我看到这个清单：

上面的列表显示了$ scope的所有属性，正如您所看到的，它没有input的属性类型Clients和InspectionFrequencies，但$ scope确实具有属性InspectionReviews我的自定义指令my-datepicker。

由于某种原因{$ 1}}和Clients未在$ scope中创建。

知道为什么{$ 1}}和InspectionFrequencies没有在$ scope中创建？

为什么ng-model中使用的$ scope属性不是在$ scope中创建的？

0 个答案: