gpt4 book ai didi

javascript - 如何将 json 文件中的数据获取到 angularjs 指令函数中?

转载 作者:行者123 更新时间:2023-12-03 06:23:37 25 4
gpt4 key购买 nike

我正在尝试使用 Angularjs 指令来绘制 Canvas 元素。我想从 json 文件中获取要绘制的 Canvas 元素的数量和元素的属性。

// 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 的属性位于第一个 Canvas 列表元素中,而 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

最佳答案

您可以将列表数据作为值应用于canvas元素中的指令名称属性,并从指令范围访问数据:

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>

Angular

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

关于javascript - 如何将 json 文件中的数据获取到 angularjs 指令函数中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38750982/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com