ng-style로 div의 배경 이미지를 설정하는 방법

ng-style로 div의 배경 이미지를 설정하는 방법

기본적으로 링크가 있으며 클릭하면 모달(modal)이 표시됩니다.이제 modal like title에 background Image를 제외한 다른 속성을 표시할 수 있습니다! urghh!

다음은 모달입니다.

<div class="modalContainer" ng-style="{'background-image':'url({{selectedMeal.url}})'}">

                <div id="modalHeader"> 
                <div style="padding-top: 10px;">{{selectedMeal.title}}</div>

                </div>
</div>

다음은 링크입니다.

<div ng-click='selectMeal(meal)' class="contentItem" ng-repeat='meal in recipes | filter:searchText' ng-style="{'background-image':'url({{ meal.url }})'}">
                    <span id="contentItemHeader">{{ meal.title }}</span>
                    <span id="contentItemLevel">{{ meal.level }}</span>
</div>

json:

recipes:[
    {
      "type": "Breakfast",
      "title": "Chili con carne",
      "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.",
      "ratings": 4,
      "duration": 12,
      "level":"medium",
      "url":"http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg",
      "ingredients": 
          [
            {
              "vegetable": "40ml"
            }
          ],
      "method": 
          [
            {
              "1": "In a medium sized stock pot, heat the oil over  heat. Saute onions, chile peppers andgarlic until soft."
            }
          ]
    },

    {
      "type": "Breakfast",
      "title": "Spicy Noodle",
      "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.",
      "ratings": 5,
      "duration": 30,
      "level":"hot",
      "url":"http://38.media.tumblr.com/875b5eeb5b1efa37d2e9d36fbad836d3/tumblr_mzczesVrZD1rimr6yo1_1280.jpg",
      "ingredients": 
          [
            {
              "vegetable": "40ml"
            }
          ],
      "method": 
          [
            {
              "1": "In a  sized stock pot, heat the oil over  heat. Saute onions, chile peppers andgarlic until soft."
            }
          ]
    }]

작은 따옴표를 사용하는 동안 오류가 발생했습니다. 변수를 작은 따옴표 밖으로 빼야 합니다.

이 div를 위해서

<div class="modalContainer" ng-style="{'background-image':'url({{selectedMeal.url}})'}">

이 부분은 문자열로 취급되고 있습니다.

'url({{selectedMeal.url}})'

이 변수를 구문 분석하려면 각도가 필요합니다.

{{selectedMeal.url}}

이를 해결하기 위해 올바른 구문은 다음과 같습니다.

<div class="modalContainer" 
  ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">

background-image의 올바른 구문은 다음과 같습니다.

background-image: url("src");

ng-style의 올바른 구문은 다음과 같습니다.

 <div ng-style="{'background-image':'url({{re.url}})'}" ></div>

예를 들어 다음과 같습니다.

<div ng-repeat="re in recipes">
<div ng-style="{'background-image':'url({{re.url}})'}" style="height: 100px"></div>
</div>

JSFiddle : http://jsfiddle.net/U3pVM/7194/

커스텀 디렉티브를 사용할 수도 있습니다.

app.directive('backgroundImageDirective', function () {
    return function (scope, element, attrs) {
        element.css({
            'background-image': 'url(' + attrs.backgroundImageDirective + ')',
            'background-repeat': 'no-repeat',
        });
    };
});

예를 들어 다음과 같습니다.

<div ng-repeat="re in recipes">
<div background-image-directive="{{re.url}}" style="height: 100px"></div>
</div>

JSFiddle : http://jsfiddle.net/U3pVM/7193/

업데이트:

<div ng-style="'{{re.url}}' != '' && {'background-image':'url({{re.url}})'}" style="height: 100px"></div>

존재하지 않는 이미지의 취득을 시도하지 않습니다.

이건 날 위한 일이야json 또는 기타에서 데이터를 검색하는 경우 다음을 수행하십시오.

<div class="your-class" [style.background-image]="'url(' + url.image + ')'" [ngStyle]="{  'background-size': 'cover','background-repeat': 'no-repeat'} ">

언급URL : https://stackoverflow.com/questions/24899699/how-to-set-background-image-of-div-with-ng-style