CSSのアニメーションによる動的なsrcパス

Question

私は動的パスでimgを作成しようとしました。一般的な解決策は、私がそれをした

document.getElementById(); 

を使用するように見えたが、私は問題を抱えて：HTMLがロードされ、idは何も言及していたので、私はエラーを取得する前に私のコントローラが呼び出されました。私は問題を理解し、解決策は、ページの下

<script> 

地上子でスクリプトを入れて）

1のようでした。これはうまくいくはずですが、自分のコントローラでgetElementById（）を呼び出す必要があります。これは、パラメータに依存する（実際はuibmodalのコントローラ）ためです。 したがって、コントローラのパラメータを自分のHTMLのスクリプト・バレイスに渡すことができないため、これはもはや解決策ではありません。

2）私もwindow.onload（）を使用しようとしましたが、これを試してみると、onload関数はまったく呼び出されません。 さらに、私はこれを試していたことを覚えています。関数が呼び出されたときでも、imgがアニメーションで使用される必要があるため、それは遅すぎました。

私はちょっと水気がなくなり、実際に何をすべきかわかりません。私は角を使って作業していますので、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}}も私のために働いています。

Answer 1

角度範囲を使用して、jsファイル、画像、またはCSSのsrcを動的に変更できます。我々は、ユーザが使用しているスコープ変数を操作することを可能にする

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

：我々はプロパティを有する上方

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

コントローラで：

この

は自分のアプリケーションからのCSSの例でありますng-model = "brand.type"で設定するドロップダウン

通知data-ng-if="brand"コントローラがまだプロパティをロードしているかどうかを確認します。利点は、あなたは基本的なJavaScriptを使用する必要はありませんが、角度の方法でそれを行うことができるということです