将变量传递给angularjs指令模板

Question

I am trying to pass variable to directive

app.directive('pagination',function () {
    //custom directive for build pagination
    return {
        restrict: 'E'
        template:function (elem,attr) 
            //not getting the value 
            console.log(attr.pageCount);
        }
    };
})

in my html

<pagination page-count="pageCount" ></pagination>

but the pageCount value is not getting inside the template but page-count=2 this will give the value inside the template

UPDATE

 <% var i = 1;
            if (currentPage > 5) {
                i = +currentPage - 4;
            } %>
        <% for (i; i<=pageCount; i++) { %>
        <% if (currentPage == i) { %>
        <li class="page-item active"><a href="#" class="page-link"><%= i %></a></li>
        <% } else { %>
        <li class="page-item"><a class="page-link" href="?page=<%= i %>"><%= i %></a></li>
        <% } %>
        <% if (i == (+currentPage + 4)) { %>
        <% break; } %>
        <% } %>

I want to equivalent HTML in angularjs

currentPage and pageCount values can be get from the controller

UPDATE AGAIN

Now i can able to get the values in link

return {
        restrict: 'E',
        scope: {
            pagecount: '=',
            currentpage: '='
        },
        template:function (elem,attr) {
           return 'hello';
        },
        link:function (scope,elem,attr) {
            console.log("count",scope.pagecount,scope.currentpage);
        }
    };

But how can i dynamically build the HTML

Answer 1

You could retrieve the value from the scope by couple of way.

1. Using scope: {} isolated scope, and use that binding on page directly. You can't directly get scope bindings inside template function.

    app.directive('pagination',function ($compile) { //<- inject $compile //custom directive for build pagination return { restrict: 'E', template: '<div>{{pageCount}}</div>' scope: { pageCount: '='//or use `>` if it is Angular 1.5.3+ }, link: function (scope,elem) { //get scope.pageCount value and create template based on it. And append to body var template = 'myTemplateInStringFormat'; element.append($compile(template)(scope)); } }; }) 

2. Evaluate value from the current scope. using $eval / $parse inside the link function of directive. Like $scope.$eval('pageCount');