AngularJS - ng-style không cập nhật css nền tài sản

Question

Tôi có một dịch vụ mà trả về URL hình ảnh, và nó được gọi bằng cách sử dụng đoạn mã sau:

angular.forEach(results, function (item) { 
    item.img = "/images/searchItem.jpg"; 
    $http.post("https://my.api.com/?id=" + item.id).success(
      function (url) { 
       item.img = url; 
      }); 
}); 

trên quan điểm của tôi, tôi đã từng có một hình ảnh với ng -src thuộc tính, mà làm việc một cách hoàn hảo như vậy:

<img ng-src="{{item.img}}"> 

Sau đó, tôi đã quyết định sử dụng background-image trên SPAN thay vì:

<span ng-style="{'background':'transparent url({{item.img}})'}"></span> 

nay là dòng chảy chỉ hoạt động trên chạy đầu tiên, sau đó tôi có thể nhìn thấy (trong giao diện điều khiển) html sau

<span ng-style="{'background':'transparent url(http://expertsimages.liveperson.com/images/rating/rate10.gif)'}" style="background-image: url(https://fb.lp-chat.com/images/searchItem.jpg); background-color: transparent; background-position: initial initial; background-repeat: initial initial;"></span> 

mà chỉ ra rằng biến cập nhật, tuy nhiên html vẫn còn nằm trên trạng thái ban đầu của nó.

Tôi đã cố gắng gọi áp dụng/thông báo khi đăng bài thành công, nhưng đã gặp lỗi $ thông báo đã được tiến hành (có ý nghĩa). Điều strage là sau khi một digest bình thường (ví dụ trên các thay đổi ui khác) phong cách đang được áp dụng và tôi thấy hình ảnh bên phải.

Tôi thiếu gì ở đây?

Cập nhật: Tôi đã tạo một JS fiddle chứng minh vấn đề này ... trông giống như lỗi trong góc cạnh với tôi.

Answer 1

Tôi cũng đã thực hiện điều này. Thay vì đánh giá với {{ }}, hãy sử dụng chuỗi + giá trị nối.

này sẽ làm việc:

<span ng-style="{'background':'transparent url(' + item.img + ')'}"></span>)

Dưới đây là một phiên bản làm việc của "giá trị" fiddle

Answer 2

Trong trường hợp bạn đang cập nhật biến phạm vi của bạn, quấn này trong một cuộc gọi $timeout để đẩy bản cập nhật cho phạm vi của bạn và sau đó nhìn bạn, điều này một cách hiệu quả sẽ bump cập nhật tiếp theo digest tránh tiêu hóa đã cơ bản dở dang xung đột :

$timeout(function(){ 
     $scope.var = value; 
    }); 

This question thread có thể cung cấp cho bạn một số thông tin hữu ích liên quan đến apply vs timeout vv

Answer 3

Nó không làm việc vì góc đánh giá trị nội dung t của dấu ngoặc đơn chỉ một lần và không xác định được biến mà bạn muốn ràng buộc bên trong chuỗi đó.

Bạn tuy nhiên có thể tạo ra chỉ thị riêng của bạn như vậy:

app.directive('backImg', function(){ 
    return function(scope, element, attrs){ 
     attrs.$observe('backImg', function(value) { 
      element.css({ 
       'background': 'transparent url(' + value +')' 
      }); 
     }); 
    }; 
}); 

và sau đó sử dụng nó trong mẫu của bạn như thế này:

<div ng-if="vis" class="container" back-img="{{imgSrc}}"></div> 

Tôi đã cập nhật fiddle của bạn và nó dường như làm việc tốt http://jsfiddle.net/dS4pB/3/

Answer 4

có thể bạn đang gặp phải vấn đề tương tự mà tôi phải đối mặt gần đây và được giải quyết bằng cách sử dụng ng-bind.

kiểm tra câu trả lời giải thích trong câu hỏi này:

AngularJS : Why ng-bind is better than {{}} in angular?

một lần tôi đã sử dụng ng-ràng buộc innerHTML của tôi là đúng được cập nhật.

Answer 5

góc 2 có một cách ngọt ngào để làm điều này, = bạn

[phong cách *.]

<span [style.background-color]="transparent" [style.background-image]="item.img"></span>