如何從json文件中獲取數據到angularjs指令函數中？

Question

我想使用Angularjs指令繪製畫布元素。我想從json文件中獲取要繪製的畫布元素的數量和元素的屬性。

// Define the `myApp` module 
var myApp = angular.module('myApp', []); 

// Define the `ListController` controller on the `myApp` module 
myApp.controller('ListController', function ListController($http, $scope) { 
    $http.get('list.data.json').then(function (response) { 
     $scope.lists = response.data; 
    }); 
}).directive("appListDraw", function appListDraw() { 
    return { 
     restrict: 'A', 
     link: function (scope, element){ 
      var ctx = element[0].getContext('2d'); 
      ctx.fillStyle = "rgb(200,0,0)"; //I want to insert json data here (list.fill1) 
      ctx.fillRect(10, 10, 50, 50); 

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; //I want to insert json data here (list.fill2) 
      ctx.fillRect(30, 30, 50, 50); 
      ctx.stroke(); 
     } 

    } 

}); 

其目標是我已經list.id 1的屬性將在第一畫布列表元素和list.id 2的屬性在第二

list.data.json看起來是這樣的：

[ 
    { 
     "id": 1, 
     "fill1": "rgb(200,0,0)", 
     "fill2": "rgba(0,0,200,0.5)", 
    }, 
    { 
     "id": 2, 
     "fill1": "rgb(40,0,0)", 
     "fill2": "rgba(0,0,200,0.5)", 
    }, 
] 

，我希望把它變成像這樣的canvas元素：

<ul> 
    <li ng-repeat="list in lists"> 
    <canvas name='canvas' width="800" height="100" app-list-draw></canvas> 
    </li> 
</ul> 

有我能做到這一點的一種方式？

我添加了一個Plunker：http://plnkr.co/edit/gbg6CWVNn1HziSYSTtPP?p=preview

Answer 1

您可以將列表數據的值在canvas元素的指令name屬性，並訪問該指令範圍的數據：

https://jsfiddle.net/kucaexp4/

HTML

<ul> 
    <li ng-repeat="list in lists"> 
    <canvas name='canvas' width="800" height="100" app-list-draw="list"></canvas> 
    </li> 
</ul> 

角

directive("appListDraw", function appListDraw() { 
    return { 
     restrict: 'A', 
     scope: { 
      list: '=appListDraw' 
     }, 
     link: function (scope, element){ 
      var ctx = element[0].getContext('2d'); 
      ctx.fillStyle = scope.list.fill1; //I want to insert json data here (list.fill1)// 
      ctx.fillRect(10, 10, 50, 50); 

      ctx.fillStyle = scope.list.fill2; //I want to insert json data here (list.fill2) 
      ctx.fillRect(30, 30, 50, 50); 
      ctx.stroke(); 
     } 
}