{"action":"created","issue":{"url":"https://api.github.com/repos/driftyco/ionic/issues/6834","repository_url":"https://api.github.com/repos/driftyco/ionic","labels_url":"https://api.github.com/repos/driftyco/ionic/issues/6834/labels{/name}","comments_url":"https://api.github.com/repos/driftyco/ionic/issues/6834/comments","events_url":"https://api.github.com/repos/driftyco/ionic/issues/6834/events","html_url":"https://github.com/driftyco/ionic/issues/6834","id":159552007,"number":6834,"title":"Content-repeat and use of custom directive that sets 'background-image' property is buggy","user":{"login":"miparnisari","id":5374887,"avatar_url":"https://avatars.githubusercontent.com/u/5374887?v=3","gravatar_id":"","url":"https://api.github.com/users/miparnisari","html_url":"https://github.com/miparnisari","followers_url":"https://api.github.com/users/miparnisari/followers","following_url":"https://api.github.com/users/miparnisari/following{/other_user}","gists_url":"https://api.github.com/users/miparnisari/gists{/gist_id}","starred_url":"https://api.github.com/users/miparnisari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/miparnisari/subscriptions","organizations_url":"https://api.github.com/users/miparnisari/orgs","repos_url":"https://api.github.com/users/miparnisari/repos","events_url":"https://api.github.com/users/miparnisari/events{/privacy}","received_events_url":"https://api.github.com/users/miparnisari/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/driftyco/ionic/labels/v1","name":"v1","color":"888888"},{"url":"https://api.github.com/repos/driftyco/ionic/labels/virtualscroll","name":"virtualscroll","color":"5319e7"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-06-10T03:23:05Z","updated_at":"2016-06-10T05:26:30Z","closed_at":"2016-06-10T05:26:30Z","body":"#### Short description of the problem:\r\nI am using the directive `collection-repeat` with an array of contacts. Within it, I use a custom directive to display an image, a title and a subtitle. The directive makes use of the CSS property `background-image` to show the image.\r\n\r\nThe issue is that when I refresh the model array and the URL of the images chage, the behavior of the images becomes buggy: as you scroll, for some items the image displayed is incorrect. Demo [here](http://plnkr.co/edit/t4opQdqr4VStpqP6MdQn?p=preview).\r\n\r\n#### What behavior are you expecting?\r\nThe images to be completely refreshed when the model array is changed.\r\n\r\n**Steps to reproduce:**\r\nIn the demo, when you click on \"Facebook contacts\" the image shown is the Facebook logo. However, when you click on \"Google\" contacts, and scroll, the images are sometimes incorrect.\r\n\r\n```html\r\n  <ion-content>\r\n    <ion-list>\r\n      <div class=\"item item-avatar\" \r\n      collection-repeat=\"contact in viewing\"\r\n      force-refresh-images=\"true\"\r\n      ng-click=\"selectContact(contact)\">\r\n        <custom-avatar from=\"contact\"></custom-avatar>\r\n        <h2>{{contact.title}}</h2>\r\n        <p>{{contact.subtitle}}</p>\r\n      </div>\r\n    </ion-list>\r\n  </ion-content>\r\n```\r\n\r\n```javascript\r\n.directive('customAvatar', function($$jqLite) {\r\n    return {\r\n      restrict: \"AE\",\r\n      transclude: true,\r\n      scope: {\r\n        from: '='\r\n      },\r\n      template: '<div class=\"from\" ng-class=\"{hasNotPic:!fromUrl}\"></div>',\r\n      link: function(scope, element, attrs) {\r\n        var process = function() {\r\n          element.on('click', function(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n          })\r\n\r\n          if (scope.from) {\r\n            scope.fromUrl = scope.from.feed_pic_url;\r\n\r\n            var fromEl = element[0].querySelector('.from');\r\n\r\n            if (scope.fromUrl) {\r\n              $$jqLite(fromEl).css('background-image', 'url(\"' + scope.fromUrl + '\")');\r\n            } \r\n          }\r\n        }\r\n\r\n        var destroy = scope.$watch('from', function() {\r\n          if (scope.from) {\r\n            process();\r\n            destroy();\r\n          }\r\n        });\r\n\r\n      },\r\n      \r\n    };\r\n  }\r\n```\r\n\r\n**Other information:** the issue disappears if instead of using a custom directive I use `<img ng-src={{contact.feed_pic_url}} />`\r\n \r\n\r\n**Which Ionic Version?** 1.3.1\r\n\r\n\r\n#### Plunker that shows an example of your issue\r\n\r\nhttp://plnkr.co/edit/t4opQdqr4VStpqP6MdQn?p=preview\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/driftyco/ionic/issues/comments/225096195","html_url":"https://github.com/driftyco/ionic/issues/6834#issuecomment-225096195","issue_url":"https://api.github.com/repos/driftyco/ionic/issues/6834","id":225096195,"user":{"login":"jgw96","id":8823093,"avatar_url":"https://avatars.githubusercontent.com/u/8823093?v=3","gravatar_id":"","url":"https://api.github.com/users/jgw96","html_url":"https://github.com/jgw96","followers_url":"https://api.github.com/users/jgw96/followers","following_url":"https://api.github.com/users/jgw96/following{/other_user}","gists_url":"https://api.github.com/users/jgw96/gists{/gist_id}","starred_url":"https://api.github.com/users/jgw96/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jgw96/subscriptions","organizations_url":"https://api.github.com/users/jgw96/orgs","repos_url":"https://api.github.com/users/jgw96/repos","events_url":"https://api.github.com/users/jgw96/events{/privacy}","received_events_url":"https://api.github.com/users/jgw96/received_events","type":"User","site_admin":false},"created_at":"2016-06-10T05:26:30Z","updated_at":"2016-06-10T05:26:30Z","body":"Hello! Thanks for opening an issue with us! As this seems like more of a support question of how to implement custom functionality i will urge that you ask this question on our forum (forum.ionicframework.com). Thanks for using Ionic!"}}
{"actor":{"display_login":"jgw96"}}