Angularjsを使用してクラスの背景画像を変更します

Question

別の.cssファイルからロードされた"tp-cont"というクラスがあります。以下のコードを使用してjQueryを使用して背景イメージを変更することができます。 HTMLで

：コントローラーで

<li ng-click="changeTemplateBackgroundImage()"></li> 

：

$scope.changeTemplateBackgroundImage = function(){ 

     var imageUrl = 'public/uploads/Admin/template_themes/1/black.png'; 
     $('.tp-cont').css('background-image','url(' + imageUrl + ')'); 

    }; 

私はangularjs

を使用して、同じのための回避策のおかげであるがどうかを知りたいです前進。下記の

回答：コントローラで

：HTMLで

$scope.changeTemplateBackgroundImage = function(){ 

     $scope.bgUrl = 'public/uploads/Admin/template_themes/1/black.png'; 

    }; 

：

<div class="tp-cont" ng-style="{ 'background-image': 'url({{bgUrl}})' }"> 

Answer 1

：

$scope.changeTemplateBackgroundImage = function(){ 

     $scope.bgUrl = 'public/uploads/Admin/template_themes/1/black.png'; 

    }; 

HTMLでは：

<div class="tp-cont" ng-style="{ 'background-image': 'url({{bgUrl}})' }"> 

Answer 2

はい、あなたはディレクティブを作成して使用することができます$要素

https://docs.angularjs.org/api/ng/function/angular.element

また、あなたのコントローラで直接これを行うことができます。のdocument.getElementById

Answer 3

$scope.changeTemplateBackgroundImage = function(){ 
 

 
     var imageUrl = 'public/uploads/Admin/template_themes/1/black.png'; 
 
     var element = document.getElementByClassName("tp-cont"); 
 
     element.style.backgroundImage = 'url('+imageUrl')'; 
 

 
    };

Answer 4

あなたはあなたの関数でmyStyle文字列を設定し、

<span ng-style="myStyle">Sample Text</span>のように、ng-styleを使用することができるとのJSをvanile使用するALOS可能です。コントローラーで