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