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

时间:2015-11-22 22:41:39

标签: angularjs

我正在创建一个指令,它将根据从服务器收到的数据自动生成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代码:

enter image description here

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

但是,当我使用开发者工具(F12)在源中观察$ scope时:

我看到这个清单:

enter image description here

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

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

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

0 个答案:

没有答案