我可以在 Angular ng-style 指令中使用来自 API 调用的数据吗？

Posted 2023-03-06

【中文标题】我可以在 Angular ng-style 指令中使用来自 API 调用的数据吗？

【英文标题】：Can I use data from API call in Angular ng-style directive?

【发布时间】：2014-11-12 02:14:48

【问题描述】：

我正在尝试根据 API 中的其他数据设置从 API 中提取的图像周围的边框颜色和框阴影颜色。基本上，我希望动态加载这些颜色。通过研究，我知道 ng-style 是要走的路，我已经完成了 90% 的路。我在使用 ng 样式的 CSS 中的 API 调用返回的数据时遇到问题。 见下文：

相关html：

<a href="item.link" target="_blank">
    <img src="item.images.standard_resolution.url"  class="img-responsive" ng-style="homeColors" id="image">
</a>

Angular 控制器的相关代码：

Stadia.get($scope.id).success(function(response) 
    $scope.shadow = response.prim_hex;
    $scope.border = response.sec_hex;

    $scope.homeColors = 
        "border": "2px solid response.prim_hex",
        "box-shadow": "3px 3px 7px response.sec_hex",
        "margin": "6px",
        "padding": "0"
    

我对如何将 API 结果（response.prim_hex 和 response.sec_hex）获取到我的 CSS 对象 homeColors 中感到困惑，因此它们被加载到我的 ng-style 指令中。

【参考方案1】：

您将变量名称用作字符串的一部分，而不是让它们求值和附加。试试下面的：

Stadia.get($scope.id).success(function(response) 
    $scope.shadow = response.prim_hex;
    $scope.border = response.sec_hex;

    $scope.homeColors = 
        "border": "2px solid " + $scope.shadow,
        "box-shadow": "3px 3px 7px " + $scope.border,
        "margin": "6px",
        "padding": "0"
    

【参考方案2】：

怎么样？

$scope.shadow = response.prim_hex;
$scope.border = response.sec_hex;

$scope.homeColors = 
    "border": "2px solid " + $scope.shadow,
    "box-shadow": "3px 3px 7px " + $scope.border,
    "margin": "6px",
    "padding": "0"

严格来说，您应该检查响应值。

http://jsfiddle.net/xmj2q8Lj/6/