Popover with $compile service

by Anam Ansari

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div ng-app="bootstrap" ng-controller="justtry" id="example">
    <div href="#" pop-over items="greet1" title="detailes" display-length="8">
<span class="display_data"></span>

<a class="view_more">...</a>

    </div>
   
    <br/>
    <br/>
</div>

CSS

#example {
    margin:40px;
}

JavaScript

var bootstrap = angular.module("bootstrap", []);


bootstrap.controller('justtry', ['$scope',

function ($scope) {
    $scope.greet1 = "flag Yes I see how a directive would work for this, however I'd like to add the tooltips to existing text/markup which will not a directive binding element or attribute (see line 15 in the html of the jsfiddle). So even if I were to create a directive, I'm not sure how to apply it. That's why a filter seemed like a good fit, although I agree with you the post-filtered code is not getting compiled";
    $scope.greet2 = "2two  welcome aboroad";
    $scope.greet3 = "3three  welcome aboroad";
}]);

bootstrap.directive('popOver', function ($compile) {
    var itemsTemplate = "<ul class='unstyled'><li>{{items}}</li></ul>";
    0
    var getTemplate = function (contentType) {
        var template = '';
        switch (contentType) {
            case 'items':
                template = itemsTemplate;
                break;
        }
        return template;
    }
    return {
        restrict: "A",
        transclude: true,
        scope: {
            items: '=',
            title: '@',
            popContent: '=',
            displayLength:'@'
        },
        transclude: true,
        template: "<span ng-transclude></span>",
        link: function (scope, element, attrs) {
            // console.log('^^^^^^^^^^^^^^^'+attrs.popContent);
            var popOverContent;
            if (scope.items) {
                var html = getTemplate("items");
                popOverContent = $compile(html)(scope);
            }
            var options = {
                content: popOverContent,
                placement: "bottom",
                html: true,
                title: scope.title,
                trigger: "hover"
            };

console.log(attrs.displayLength+'^^^^^^^^'+scope.items.substring(0, 5));  
            if ((scope.items || '').length > attrs.displayLength) {

            
             ...