Как добавить стили 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, как показано ниже изображения

Но я хочу, чтобы добавить стиль, как показано ниже изображения, используя директиву elem.css()

Я пытаюсь добавить CSS style by elem.css({}), но он добавляет к div, если тег изображения я хочу, чтобы стиль был только для тега изображения, и что тоже мне нужно создать тег img из директивы, например, когда я пишу elem.css(), тогда эти стили добавляются только для тега img.

Заранее благодарен.

источник

2016-07-25 Midhunsai

Пожалуйста, смотрите ссылку, может помочь вам http://stackoverflow.com/questions/22359067/adding-images-with-angular-js –

Y не использовать нг-стиль –

Вы должны использовать .find():

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

Поскольку elem является директива элементом. Итак, вы должны найти элемент для детей.

Угловой способ использует встроенные методы jQuery, а .find() имеет ограничение на поиск элементов только по их тэгам.

источник

2016-07-25 07:18:41 Jai

спасибо @Jai это помогло мне – Midhunsai

Приветствую @Midhunsai – Jai

, если iam использует тег «img», «h1» и «h2» в той же директиве, тогда как я могу писать стили, используя diretive, как и выше @jai – Midhunsai

Вы можете сделать:

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

Или просто создать файл CSS:

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

Вам не нужно стиль IMG снова и снова в функции связи.

источник

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 с помощью директив?

ответ

Смежные вопросы