[英]Angular parse JSON into directive
Basically I am using angular routing for my pages and its respective template. 基本上,我在页面及其相应模板中使用角度路由。 Every pages has form in which it has more HTML fields(input/select/textarea).
每个页面的形式都有更多的HTML字段(输入/选择/文本区域)。 I am trying to create reusable Directive to create html field like below
我正在尝试创建可重复使用的指令以创建如下所示的html字段
app.directive('field',function(){
return {
restrict : "E",
scope : {
},
link : function(scope,elem,attr){
var content;
scope.Options = {
id: scope.$id+'_'+elem.attr('id'),
label : elem.attr('label'),
placeholder : elem.attr("placeholder"),
};
scope.contentUrl = 'templates/fields/'+elem.attr('template')+'.html';
},
template: '<div ng-include="contentUrl"></div>'
}
})
Now from my respective page HTML, I will use this directive. 现在,从我各自的页面HTML中,我将使用此指令。 For example from customer page HTML has,
例如,在客户页面HTML中,
<field id="NAME" template="text" label="First Name" placeholder="Enter First Name"></field>
So far so good. 到现在为止还挺好。 Field is generated as expected.
字段按预期方式生成。 Now I wanted to prepopulate the customer JSON data into directive respective fields.
现在,我想将客户JSON数据预填充到相应指令的字段中。
I tried to create factory service to get JSON data and inject this service to my customer controller like below 我试图创建工厂服务以获取JSON数据并将此服务注入到我的客户控制器中,如下所示
Factory service 工厂服务
app.factory('dataService', function($http) {
return {
getCustomerData: function() {
//return the promise directly.
return $http.get('offline/customer.json')
.then(function(result) {
//resolve the promise as the data
return result.data;
});
}
}
});
customerController customerController
app.controller('customerController', ['$scope', 'dataService',function($scope,dataService) {
dataService.getCustomerData();//need to parse this data into field directive
}]);
Am I doing right way? 我做对了吗? How do we parse respective page data into their page fields created by directive?
我们如何将各自的页面数据解析为指令创建的页面字段?
First of all, I think, you need to bind fetched data with controller's scope: 首先,我认为,您需要将获取的数据与控制器的范围绑定:
app.controller('customerController', ['$scope', 'dataService',function($scope,dataService) {
dataService.getCustomerData().then(function ( data ) {
$scope.data = data; // let data == { someField: 42 }
};
}]);
And after that, you need to use data from scope into angular's template: 之后,您需要使用范围中的数据到angular的模板中:
<field id="NAME" template="text" label="First Name" placeholder="Enter First Name">{{someField}}</field>
To prepopulate your fields, you need to use Angular binding ie ngModel
. 要预填充字段,您需要使用Angular绑定,即
ngModel
。 Using ng-include
in your directive is redundant, you can use directly the template attribute in your directive. 在指令中使用
ng-include
是多余的,您可以在指令中直接使用template属性。
I would do it that way : 我会那样做:
app.directive('customtext',function() {
return {
restrict:'E',
require:'ngModel',
scope:{
thevalue:'='
},
template:'<input type="text" ng-model="thevalue"/>',
}
});
and use : 并使用:
<customtext thevalue="name" />
And now you can populate the controller's scope and the bind will be done this way : 现在您可以填充控制器的作用域,绑定将通过以下方式完成:
app.controller('customerController', ['$scope','dataService',function($scope,dataService) {
var data = dataService.getCustomerData();
$scope.name = data.name;
}]);
You will need to create a directive for each field you want to create. 您将需要为要创建的每个字段创建一个指令。
ps: the JSON that get through $http is automatically converted as an object. ps:通过$ http获得的JSON将自动转换为对象。 You don't need to use
JSON.parse
. 您不需要使用
JSON.parse
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.