JSFiddle - React, Tailwind, and code Playground

directive inside ng-repeat

by Andrew Pougher

HTML

<div ng-app="myModule">
    <div ng-controller="myController">
        <div ng-repeat="image in images">            
            <div myimg image='image' ></div>
        </div>
    </div>
</div>

JavaScript

//constructor function for images
var Img = function(title, url){
    this.title = title;
    this.url = url;
}

//data to work with
var img1 = new Img('North Norfolk Sea', 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRhWCn0ZaiSXgOdvk_cTRiNxPywASXQ-B5r4wOnIyuPLQjSbGXpvCu9Go8n');
    var img2 = new Img('Salty Trees', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXcs26j2JpxdLvZlhLOxRpTUIrmZfiO8lf4PwEVvHtRfeLhO2hhVU0hdDj');
    var img3 = new Img('Beach Ice', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2FobVuLbOUgR5VR8RnqO61dVbbY8YtaGnh4jgQFm76lbpnVMq8A');

var images = [img1, img2, img3];

//angular stuff
var myModule = angular.module('myModule', []);

myModule.controller('myController', ['$scope', function($scope){    
    $scope.images = images;
    
}]);

myModule.directive('myimg', function(){
    return{
        restrict: 'A',
        scope: {image:'=',index: '@'},
        template: '<p>{{image.title}}</p><img ng-src="{{covertSvgJpg(image.url)}}" />',
        controller: ['$scope', function($scope){
            console.log($scope);
                $scope.covertSvgJpg = function(){return 'https://placehold.it/90x90/3edc34/'};
        }]
        /*link:function(scope, elem, attr){
            console.log(attr);
        }*/
    };
});





 	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');