Question

我有一个代码，我使用$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数据作为函数等访问，那将会更好......

Answer 1

添加范围变量：

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

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

在指令中访问http.get数据

2 个答案:

JSFiddle demo