Transformation cannot be added to style in Angular directive in IE only

I have created an angular directive that creates a photo gallery. Sometimes the images have to be rotated, which I am doing through the CSS transform property (appended to the style in the directive):

testApp.directive('galPhoto', function () {
        return {            
            restrict: 'E',
            template:
                '<div class="photoClass" style="background-image:url({{photo.url}});{{photo.photoTransform}}" ng-click="addRotation($event, photo)"></div>'
        }
});

This all works fine in Firefox and Webkit browsers, however in Internet Explorer (I am testing on IE11) the transform property does not appear to get added to the style (only the background appears in the style). I have tried setting with ng-style as well without any luck. It is not a problem with the CSS transform as if I manually change the style everything works. I have created a very simplified Fiddle which shows the problem, working in Firefox and Chrome but not in Internet Explorer. In the Fiddle I added a ng-click which manually appends the transform to the style to show that setting the style works, it is just that Angular appears to be doing something when building the style string in Internet Explorer. Any ideas how to fix?

Fiddle Demonstrating Problem

Answers


I really don't know where the problem come from, but anyway, you're not doing this the AngularJS way. Why don't you use the ngStyle directive? You will avoid this dirty code repetition in your data, and this works perfectly in all browsers.

// The data associated to each image
{
    url: 'http://placekitten.com/100/150',
    transform: 'rotate(' + rotate + 'deg)',
} 
<!-- The template -->
<div
    class="photoClass"
    ng-style="{'background-image': 'url(' + photo.url + ')', '-webkit-transform': photo.transform, '-ms-transform': photo.transform, transform: photo.transform}"
    ng-click="addRotation($event, photo)"
></div>

JSFiddle


Need Your Help

is there a string to map splitter in google collections

java string map guava

I am looking for the opposite of map joiner in google collections. is there something like this, and if not why?

Error while changing API level from 23 to 22

android sdk android-min-sdk

I want to change the minimum SDK version in Android Studio from API 23 to API 22 as HttpClient is not supported in API 23.I have tried changing it in build.gradle(Module:app) ie I have changed the

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.