Question

我正在尝试将变量传递给指令

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

在我的HTML中

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

但是pageCount值没有进入template，但是page-count=2这会在模板中提供值

更新

 <% 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; } %>
        <% } %>

我想在angularjs中等效HTML

currentPage和pageCount值可以从控制器中获取

再次更新

现在我可以在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);
        }
    };

但我怎样才能动态构建HTML

Answer 1

您可以通过几种方式从范围中检索值。

使用scope: {}隔离范围，并直接在页面上使用该绑定。您无法直接在template函数内获取范围绑定。

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));
    }
  };
})

评估当前范围的值。在指令的link函数中使用$eval / $parse。与$scope.$eval('pageCount');

将变量传递给angularjs指令模板

1 个答案: