using inline templates from directive

using inline templates from directive

by Mayank Dixit

HTML

<div ng-init="">
    <div ng-controller="mainCtrl">
        <div ng-repeat="p in people">
            <span name-list="{{p}}"/>
        </div>
    </div>
</div>
<script type="text/ng-template" id="namelist.html">    
    <img ng-src="{{userUrl}}" class="pic"/> hi {{name}}
</script>

CSS

.pic {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border-radius: 50%;
    margin: 10px;
}

JavaScript

angular.module("myApp", [])
.controller("mainCtrl", function($scope) {
    $scope.people = ["mad", "sad", "killer"];
    $scope.peopleInfo = {
        "mad": {
            "_id": 1,
            "pic": "http://goo.gl/Z8px0X"
        },
        "sad": {
            "_id": 1,
            "pic": "http://goo.gl/CzbJvm"
        },
        "killer": {
            "_id": 1,
            "pic": "http://goo.gl/LgR9cm"
        }
    }
})
.directive('nameList', function() {
    return {
        restrict: 'AE',
        templateUrl: 'namelist.html',
        link: function($scope, el, attr) {
            $scope.name = attr.nameList;
            $scope.userUrl = $scope.peopleInfo[attr.nameList].pic;
        }
    }
});