2014-09-02 15 views
1

我想重新加載具有相同url內部指令的div的背景圖片。當我的看法負載,我用這個指令將圖像作爲背景展示給一個div如何使用指令中的相同url重新加載背景圖片

app.directive('backImg', function() { 
     var directive = { 
      link: link, 
      restrict: 'A' 
     }; 
     return directive; 

     function link(scope, element, attrs) { 



      attrs.$observe('backImg',function(n,o){ 
       if(!n) return; 


       element.css({ 
        'background-image': 'url(' + n + ')', 
        'background-size': 'cover' 
       }); 


      },true); 

     } 
    }); 

我的HTML元素看起來像這樣

<div data-ng-if="vm.user.user_id!==undefined" data-back-img="{{vm.serviceUrl}}/image/user/{{vm.user.user_id}}" 
      class="user-img-div" style="width:100%; height:100%;"></div> 

它工作正常,但會發生什麼,我給用戶重新上傳他的個人資料圖片,所以上傳後,我想刷新具有相同網址的背景圖片。我怎樣才能做到這一點?上面的代碼似乎沒有工作。

+0

如何爲用戶重新uplo。對圖像進行添加?基本上你怎麼設置'vm.serviceUrl' – PSL 2014-09-02 21:30:15

+0

vm.serviceurl是基地網址。在文件上傳之後,我通過做var random =(new Date())。toString()來調整vm.user.user_id。 scope.vm.user.user_id = scope.vm.user.user_id +'?r ='+ random;最終捕獲$觀察方法。儘管現在url具有查詢字符串參數,但它不會更改背景圖像url,但沒有QS,它將保持不變。 – 2014-09-02 21:31:39

+0

請檢查一致,我編輯。讓我知道如果這還不清楚 – 2014-09-02 21:34:18

回答

1

你的問題最可能是因爲隨機字符串中的空格(由於(新的Date()).toString()),你正在追加從瀏覽器中獲取刷新的圖像空間意味着你生成一個不好的圖像url,所以你可能想要。包網址在引號或使用蜱

嘗試將其更改爲: -

  element.css({ 
       'background-image': 'url("' + n + '")', //Wrap url in quotes 
       'background-size': 'cover' 
      }); 

或者剛剛拿到蜱和其追加

 var random = new Date().getTime();