Могу ли я использовать данные из вызова API в директиве Angular в стиле ng?

Я пытаюсь установить цвет границы и цвет тени вокруг изображений, извлеченных из API, на основе других данных из API. По сути, я хочу, чтобы эти цвета загружались динамически. Благодаря исследованиям я знаю, что ng-стиль — это путь, и я прошёл 90% пути. У меня проблемы с использованием данных, возвращаемых из моего вызова API, в CSS стиля ng. Смотри ниже:

соответствующий html:

<a href="{{item.link}}" target="_blank">
    <img src="{{item.images.standard_resolution.url}}" alt="" 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.


javascript html css angularjs ng-style
person MattDionis    schedule 17.09.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У вас есть имена переменных, которые используются как часть строки, а не оцениваются и добавляются. Попробуйте следующее:

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"
    }

person David Sung Lee    schedule 17.09.2014

arrow_upward
1
arrow_downward

Как насчет этого?

$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/

person kechol    schedule 17.09.2014