{{ item.text }}
{{ item.desc }}
Send Message

Event handling in List X

                angular.module('myApp', ['listxModule']);

angular.module('listxModule').controller('MainCtrl', ['$scope', function($scope) {
    $scope.clickHandler = function(item) { alert(item.text + ' is selected') };
    $scope.loadHandler = function() { console.log('items are loaded') };
    $scope.nestedHandlers = {
        itemBtnClick: function(item, $event) {
            $event.cancelBubble = true;
            alert('Send Message to: ' + item.text);
            console.log(item, $event);
        }
    };
}]);
                
                <body ng-app="myApp">
                <list-x ng-model="items" title="Contacts" on-load="loadHandler()" on-select="clickHandler(item)" load-url="test3.json" item-handlers="nestedHandlers">
    <item-template>
        <a href="#" class="list-x-item"><img ng-src="{{item.image}}" class="icon pull-left">
        <div class="main-text"><strong>{{ item.text }}</strong></div>
        <div class="desc"><span>{{ item.desc }}</span>
            <div ng-click="itemHandlers().itemBtnClick(item, $event)" class="btn btn-info btn-sm pull-right">Send Message</div>
        </div>
        <div class="clearfix"></div></a>
    </item-template>
</list-x>