0
我想提供一個頁面選擇指令,該指令可生成「頁面[ 1 ]
」的x「。下拉菜單中的頁面數量取決於傳入指令的值,因此它不能成爲靜態模板的一部分。我很難搞清楚如何/在哪裏生成<select><option>...</select>
。根據AngularJS指令中的輸入值生成可變長度下拉列表
我曾嘗試,均未成功通過做到這一點:
- 一個
$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>« Prev</button>\
page <select>\
<option>#</option>\
</select> of {{calcPages()}}\
<button>Next »</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);
};
}
};
}
]);
你在這裏重新發明輪子頗有幾分......所有你需要做的就是用NG-模型,NG-選項和NG-變化把
它有車輪改造的味道,這就是我發佈的原因。 :) – N13