angularjs指令不能與動態內容合作

你好，我有創造的角度指令添加bakcground，使其寬度等於身高（1：1）方形格angularjs指令不能與動態內容合作

app.directive('backImg', function($timeout){ 
return function(scope, element, attrs){ 
    $timeout(function(){ 
      var url = attrs.backImg; 
      console.log(attrs); 
      console.log("after printing attrs"); 
      if (url == null || url == ""){ 
        url="/web/header.png"; 
      } 
      element.css({ 
        'height' : element[0].offsetWidth, 
        'margin-bottom' : '20px', 
        'background-image': 'url(' + url +')', 
        'background-size' : 'cover', 
        'background-repeat': 'no-repeat', 
        'background-position': 'center center', 
      }); 
    }); 
    }; 
});

這個指令是工作的罰款與元素出現在頁面第一次加載

....一些HTML

<div back-img="{{group.images[0].path}}"> </div> ---> Working fine

....更多HTML

這個時間不起作用，唯一的區別是它顯示sessionSelected爲true。

<div class="row" id="active-session" ng-show="userCtrl.sessionSelected"> 
    <div back-img="{{group.images[0].path}}"> </div> ---> Not working Working 
</div>

能否請你幫我想出解決辦法，請

編輯我看起來雖然它不顯示（NG-顯示）是被稱爲指令，因爲這個原因group.images [0] .path爲空。

如何在可見狀態下調用指令？我認爲這將是一路

在這裏，您可以看到顯示的

FIREFOX DEBUG

<div back-img="/web/uploads/56f7f53a2b82bbf75033559a/nKj0DMZrVt.jpeg"></div>

來源

2016-04-03 Noel Carcases

當你創建<div back-img="{{group.images[0].path}}">的元素填充了正確的IMG路徑並在元素位於display:none css時使用element[0].offsetWidth（因爲ng-show=true屬性）。所以爲了這個工作，你需要將ng-show更改爲ng-if。當您更改標誌設置爲true重新來過繪製HTML和那麼這將在directive

編輯打電話到link功能的方式

你可以隨時使用$watch功能檢查更新在URL中，當它發生時觸發因素實際顯示的變化

app.directive('backImg', function($timeout){ 
    return function(scope, element, attrs){ 
    scope.$watch(attrs.backImg,function(){ 
      var url = attrs.backImg; 
      console.log(attrs); 
      console.log("after printing attrs"); 
      if (url == null || url == ""){ 
        url="/web/header.png"; 
      } 
      element.css({ 
        'height' : element[0].offsetWidth, 
        'margin-bottom' : '20px', 
        'background-image': 'url(' + url +')', 
        'background-size' : 'cover', 
        'background-repeat': 'no-repeat', 
        'background-position': 'center center', 
      }) 
     }) 
    }; 
});

來源

2016-04-03 12:02:02 Zamboney

但如果顯示網址爲空，我設置了圖像如果（URL == NULL ||網址==「」）{ URL = 「/網絡/ header.png」; < - 這是在div上顯示的圖像 } 唯一令人失望的是div有錯誤的圖像。 –

您需要查看該參數是否以正確的方式設置。您可以通過在該行上調試您的代碼並更好地理解它來實現。它不幫助你總是可以在這裏添加代碼（控制器功能） – Zamboney

我看起來像指令被調用時，它沒有顯示（ng顯示），併爲此group.images [0] .path是空值。如何在可見時調用指令？ –

angularjs指令不能與動態內容合作

回答

相關問題