根据AngularJS指令中的输入值生成可变长度下拉列表

Question

我想提供一个页面选择指令，该指令可生成“页面[ 1 ]”的x“。下拉菜单中的页面数量取决于传入指令的值，因此它不能成为静态模板的一部分。我很难搞清楚如何/在哪里生成<select><option>...</select>。

我曾尝试，均未成功通过做到这一点：

• 一个$observe（和$watch）在link
• 的功能加入到$scope在controller，它返回$compile(markup)($scope)（这使错误Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed!）
• <select>元素的子指令（link$observe r似乎无法获得recordCount更新，无论继承或共享的范围。）
• 模板

这里是我的错位的代码，因为它目前为ng-repeat。

HTML

<x-pager 
    record-count="{{recordCount}}" 
    page-size="pageSize" 
    page-number="pageNumber" 
    set-page="selectPage(page)" 
></x-pager> 

JS

module.directive("pager", ["$compile", 
    function ($compile) 
    { 
     return { 
      template: "<div class='pager' ng-show='recordCount > pageSize'>\ 
          {{recordCount}} results\ 
          <button>&laquo; Prev</button>\ 
          page <select>\ 
          <option>#</option>\ 
          </select> of {{calcPages()}}\ 
          <button>Next &raquo;</button>\ 
         </div>", 
      replace: true, 
      restrict: "E", 
      scope:  { 
       recordCount: "@", 
       pageSize: "=", 
       pageNumber: "=", 
       setPage:  "&" 
      }, 
      link: function (scope, element, attrs) 
      { 
       /* 
       * We can't build the page selection dropdown until 
       * we know how many records we have. Register an 
       * observer to do this when recordCount changes. 
       */ 
       attrs.$observe("recordCount", function (recCnt) 
       { 
        var html; 
        var pages; 
        var i; 

        if (angular.isDefined(recCnt)) { 
         html = "<select>\n"; 
         pages = Math.ceil(scope.recordCount/scope.pageSize); 

         for (i=1; i<=pages; i++) { 
          html += " <option value='" + i + "'>" + i + "</option>\n"; 
         } 
         html += "</select>"; 
         console.log("generatePageSelect html", html); 

         html = $compile(html)(scope); 

         // add the template content 
//      angular.element("select.page-selector").html(html); 
// template:   page <select class='page-selector'></select> of {{calcPages()}}\ 
        } 
       }); 
      }, 
      controller: function ($scope) 
      { 
       $scope.calcPages = function() 
       { 
        return Math.ceil($scope.recordCount/$scope.pageSize); 
       }; 

       function genPagesArray() 
       { 
        var pages = $scope.calcPages(); 
        var i; 
        var pagesArray = []; 

        for (i=0; i<pages; i++) { 
         pagesArray.push(i); 
        } 

        return pagesArray; 
       } 
       $scope.pagesArray = genPagesArray(); 
       console.log("$scope.pagesArray", $scope.pagesArray); 


// template: page {{generatePageSelect()}} of {{calcPages()}}\ 
       $scope.generatePageSelect = function() 
       { 
        var html = "<select>\n"; 
        var pages = $scope.calcPages(); 
        var i; 

        for (i=1; i<=pages; i++) { 
         html += " <option value='" + i + "'>" + i + "</option>\n"; 
        } 
        html += "</select>"; 

        return $compile(html)($scope); 
       }; 
      } 
     }; 
    } 
]);