使用CSS動畫的動態src路徑

我試圖用動態路徑製作img。常見的解決辦法似乎使用使用CSS動畫的動態src路徑

document.getElementById();

我這樣做，但我得到了一個問題：在加載之前的HTML和我得到一個錯誤，因爲ID指的是什麼我的控制器被調用。我的理解問題和解決方案似乎是

1）把腳本在

<script>

應答器的頁面下。這應該可行，但我想在我的控制器中調用getElementById（），因爲我想要做的路徑取決於參數（它實際上是一個uibmodal的控制器）。因此，由於我無法將參數從控制器傳遞到HTML中的腳本應答器，因此它不再是解決方案。

2）我也嘗試使用window.onload（），但是當我嘗試的時候，onload函數根本沒有被調用。此外，我記得曾經嘗試過這一點，甚至當函數被調用時，已經太晚了，因爲img需要在動畫中使用。

我有點不知所措，真的沒有看到該做什麼。我正在使用angular，因此我沒有嘗試基於JQuery的解決方案，但我認爲沒有理由讓它們與window.onload更相關。

有誰知道如何解決這個問題？

(function() { 
 
    'use strict'; 
 

 
    angular 
 
     .module('objectifDtyApp') 
 
     .controller('MyBadgeController',MyBadgeController); 
 

 
      MyBadgeController.$inject = ['$uibModalInstance', '$state', '$stateParams', 'BadgeView', 'items', 'Lesson']; 
 

 
      function MyBadgeController($uibModalInstance, $state, $stateParams, BadgeView, items, Lesson) { 
 
      var vm = this; 
 

 

 
      console.log(items); 
 

 
      vm.blocName = items.title; 
 
      vm.ImagePath = items.path; 
 
      console.log(vm.ImagePath); 
 

 
      window.onload = function(){ 
 
       console.log("called"); 
 
       var img =document.getElementById('ImgBadge'); 
 
       img1.src= vm.ImagePath; 
 

 
      }; 
 

 

 
      function clear() { 
 
       $uibModalInstance.dismiss('cancel'); 
 
      } 
 

 
      vm.close = function() { 
 

 
      $uibModalInstance.close(true); 
 
      //$state.go('viewCourse', {id: $stateParams.idLesson}); 
 
      } 
 
     } 
 
    })();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div> 
 
<div class="Badge_logo-demo"> 
 
    <img ng-click="vm.close()" src="" alt="Badge_logo" id= "ImgBadge" class="Badge_logo"> 
 
    <h2 class="Badge_byline" id="Badge_byline"> You successfully did the Block {{vm.blocName}} </h2> 
 

 
</div> 
 
</div>

這裏是一個片段，它顯然是行不通的，但它是爲了顯示我的代碼。我沒有放CSS，因爲它不相關。但是，如果有解決方案，可以通過將圖像的絕對路徑置於vm.ImgPath中來檢查該片段。

我確切地說，所有的東西都是在uibmodal的開頭調用的，所以它不是關於忘記ng-controller等等。 {{blocName}}正在爲我工作。

來源

2016-08-02 Alburkerk

簡而言之，你想做什麼？ – developer033

您可以使用角度範圍來動態更改您的js文件，圖像或css的src。

這是我自己的應用程序對CSS的示例：

<link data-ng-if="brand" rel="stylesheet" type="text/css" data-ng-href="css/app/brand/{{brand.type}}/brand.css" />

其中在控制器上面我們有一個屬性：

$scope.brand = {type:"cocacola"}

我們然後允許用戶使用來操縱該範圍可變使用ng-model =「brand.type」來設置它的下拉菜單

請注意data-ng-if="brand"我們檢查控制器是否已加載屬性。優點是，你不需要使用基本的JavaScript，但你可以做到這一點角度的方式

來源

2016-08-02 13:44:15

工作得很好。對我來說很愚蠢，甚至沒有看ng-src或data-ng-href，並試圖找到有風險和錯誤的解決方案。角度總是最簡單的。感謝您的快速和非常明確的答案！ – Alburkerk

@Alburkerk樂意幫忙。你能將答案標記爲已接受嗎？親切的問候 –

使用CSS動畫的動態src路徑

回答

相關問題