javascript - Angular 将 JSON 解析为指令

Question

基本上，我对我的页面及其各自的模板使用 Angular 路由。每个页面都有包含更多 HTML 字段(输入/选择/文本区域)的表单。我正在尝试创建可重用指令来创建如下所示的 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>'
        }
    }) 

现在，我将在我各自的 HTML 页面中使用此指令。例如，从客户页面 HTML 可以看出，

<field id="NAME" template="text" label="First Name" placeholder="Enter First Name"></field>

到目前为止一切顺利。字段按预期生成。现在我想将客户 JSON 数据预填充到指令的相应字段中。

我尝试创建工厂服务来获取 JSON 数据并将该服务注入(inject)到我的客户 Controller 中，如下所示

工厂服务

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;
                            });
            }
       }
    });

客户 Controller

app.controller('customerController', ['$scope', 'dataService',function($scope,dataService) {
        dataService.getCustomerData();//need to parse this data into field directive
    }]); 

我的做法正确吗？我们如何将各个页面数据解析到指令创建的页面字段中？

Answer 1

首先，我认为，您需要将获取的数据与 Controller 的范围绑定(bind):

app.controller('customerController', ['$scope', 'dataService',function($scope,dataService) {
        dataService.getCustomerData().then(function ( data ) {
            $scope.data = data; // let data == { someField: 42 }
        };
    }]); 

之后，您需要将范围中的数据使用到 Angular 的模板中:

<field id="NAME" template="text" label="First Name" placeholder="Enter First Name">{{someField}}</field>