在指令中访问http.get数据

时间:2017-01-30 09:57:35

标签: angularjs json

我有一个代码,我使用$http.get在其中获取JSON文件的数据 。现在我想访问我已经制作的自定义指令中的数据!

以下是获取json文件的代码:

$http.get('myData.json').then(function(dataList){
    for (var i = 0; i < dataList.data.length; i++) {
        this.myData = {};
        this.myData.id = dataList.data[i].id;
        this.myData.car = dataList.data[i].car;
        this.myArray.push(this.myData);
    }
});

这是我的自定义指令的代码:

app.directive('dataList', function(){
    return {
        restrict: 'E',
        templateUrl: 'data-list.html'
    };
});

如果能够将指令中的myArray数据作为函数等访问,那将会更好......

2 个答案:

答案 0 :(得分:2)

添加范围变量:

app.directive('dataList', function(){
    return {
        restrict: 'E',
        scope: {
            data: "="
        },
        templateUrl: 'data-list.html'
    };
});

将其传递给您的指令:

<data-list data="myArray">

然后,您可以在指令data-list.html的模板中访问它:

<div ng-repeat="item in data">

注意:在您的for循环中,您每次都会重置this.myData对象,同时在阵列中按下n次。因此,数组中的每个项目都将是一个空的{}对象,除了最后一个。此外,您在新对象上使用索引i,这对我来说似乎很奇怪。

而是在for循环中创建一个新对象:

for (var i = 0; i < dataList.data.length; i++) {
    var myData = {};
    myData.id = dataList.data[i].id;
    myData.car = dataList.data[i].car;

    myArray.push(myData);
}

或者仅仅执行this.myArray.push(dataList.data[i])就足够了,甚至只需分配整个数组:this.myArray = dataList.data

答案 1 :(得分:2)

您可以执行以下操作:

myApp.directive('dataList', function() {
  return {
    restrict: 'E',
    scope: {
      array: '='
    },
    template: '<div ng-repeat="o in array">ID: {{o.id}}<br/>Car: {{o.car}}</div>'
  };
});

此处$scope.myArray(在您的情况下,它来自您的$http.get请求):

$scope.myArray = [
    { id: 1, car: "Car1" },
    { id: 2, car: "Car2" }, 
    { id: 3, car: "Car3" }
];

你可以像这样使用它:

<data-list array="myArray"></data-list>

JSFiddle demo

作为旁注,我建议你修改一下创建myArray的循环:

for(...) {
    this.myArray.push({id: dataList.data[i].id, car: dataList.data[i].car});
}