ディレクティブを使用してCSSスタイルを追加するにはどうすればよいですか？

私はいくつかのcssスタイルを動的にディレクティブを使って追加しようとしています。ディレクティブを使用してCSSスタイルを追加するにはどうすればよいですか？

これは私のhtmlコードです：

<header-image image="{{BackgroundImage}}"></header-image>

これは私のディレクティブとコントローラです：

var app = angular.module('myApp', []); 
app.controller('myCtrl', function ($scope) { 

    $scope.BackgroundImage = "http://whatatimeline.com/covers/fb_profile_cover_13173327520f7.jpg"; 

}); 

app.directive('headerImage', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    templateUrl: 'backImage.html', 
    link: function (scope, elem, attr) { 
     console.log("coming to directive"); 

     scope.backImage = attr.image; 
     console.log(scope.backImage); 

     elem.css({ 
     width: '100%', 
     }) 

    } 
    } 
});

これは私のbackImage.htmlです：

<div> 
    <img ng-src="{{backImage}}" alt="BackImage"> 
</div>

私は画像

以下のように全体のdivにスタイルを追加するしかし、私は、私はCSSスタイルを追加しようとしていますディレクティブelem.css()

を使用して画像の下のようなスタイルを追加したいされ、それ以上のように試してみました

elem.css({})によって、それがdivに追加されていますが、画像タグの場合は画像タグのみのスタイルが欲しいので、elem.css()のように、imgタグを付ける必要があります。

ありがとうございます。

出典

2016-07-25 Midhunsai

見て次のリンクを持ってください、ありがとうございましたあなたは http://stackoverflow.com/questions/22359067/adding-images-with-angular-js –

Y ngのスタイル –

あなたは.find()を使用する必要があります。

elem.find('img').css({ 
    width: '100%', 
    });

elemディレクティブ要素であるため。だから、あなたはそれの子要素を見つけなければなりません。

Angularは、組み込みのjQueryメソッドを使用しており、.find()には、要素をタグンのみで検索するための制限があります。

あなたが行うことができます

出典

2016-07-25 07:18:41 Jai

を使用しないで役立つかもしれません@Jaiそれは私を助けた – Midhunsai

あなたが歓迎です@Midhunsai – Jai

"img"タグ、 "h1"と "h2"を同じディレクティブで使用している場合、どのように@jaiと同じdiretiveを使用してスタイルを書くことができます – Midhunsai

：あなたはリンク機能に何度もスタイルIMGする必要はありません

tb-header-image img { 
    width: 100%; 
}

：

elem.find('img').css({ 
    width: '100%', 
    })

それともは、CSSファイルを作成します。エルス

出典

2016-07-25 07:19:05 Gatsbill

あなたはそのようにCSSを行うことができます。

<body ng-app="myApp" ng-controller="myCtrl"> 

<h1 ng-style="myObj">Welcome</h1> 

<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
$scope.myObj = { 
    "color" : "white", 
    "background-color" : "coral", 
    "font-size" : "60px", 
    "padding" : "50px" 
} 
}); 
</script> 
</body>

をお手伝いを希望。

出典

2016-07-25 07:23:36 Hcetipe

私はディレクティブに "ngClass"を使うべきだと思います。

https://docs.angularjs.org/api/ng/directive/ngClass

出典

2016-07-25 07:34:34

ディレクティブを使用してCSSスタイルを追加するにはどうすればよいですか？

答えて

関連する問題