मैं अंकन दिखाने के लिए AngularJS का उपयोग कर रहा हूँ। मैं डिफ़ॉल्ट पेजिनेशन टेम्पलेट पर कुछ बदलाव कर रहा हूं। यह मेरा एचटीएमएल है:
<ul uib-pagination ng-model="source_pagination.current" template-url="pagination.html" total-items="source_pagination.total_pages" items-per-page="1" max-size="source_pagination.max_items" class="pagination-sm" force-ellipses="true" direction-links="false" ng-change="source_page_changed()"></ul>
...
<script id="pagination.html" type="text/ng-template">
<ul class="pagination">
<li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}">
<a href ng-click="selectPage(1)" title="First Page">
<span class="glyphicon glyphicon-fast-backward"></span>
</a>
</li>
<li ng-if="directionLinks" ng-class="{disabled: noPrevious()}">
<a href ng-click="selectPage(page - 1)" title="Previous Page">
<span class="glyphicon glyphicon-step-backward"></span>
</a>
</li>
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active}">
<a href ng-click="selectPage(page.number)" ng-class="{highlight: ShouldHighlightPage(page.number)}">
{{page.text}}
</a>
</li>
<li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1)" title="Next Page"><span class="glyphicon glyphicon-step-forward"></span></a></li>
<li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="$scope.changePage("last")" title="Last Page"><span class="glyphicon glyphicon-fast-forward"></span> </a></li>
</ul>
</script>
मैंने इस खंड को संशोधित किया:
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active}">
<a href ng-click="selectPage(page.number)" ng-class="{highlight: ShouldHighlightPage(page.number)}">
{{page.text}}
</a>
</li>
और इस वर्ग की हालत को जोड़ा {highlight: ShouldHighlightPage(page.number)}। इस कोड को फ़ंक्शन को कॉल करना चाहिए ShouldHighlightPage(pageNum) जो नियंत्रक में स्थित है:
$scope.ShouldHighlightPage = function (pageNum)
{
return true;
}
तो सभी पृष्ठों में कक्षा होनी चाहिए highlight। लेकिन, इस समारोह को कभी नहीं कहा जाता है। (फ़ंक्शन में ब्रेकपॉइंट जोड़कर चेक किया गया)। बिना प्रस्तुत किए गए सभी पेज highlight कक्षा।
मैं क्या गलत कर रहा हूँ?
धन्यवाद।
उत्तर:
उत्तर № 1 के लिए 1ठीक है, इस मुद्दे को यहाँ मिला।
The uib-pagination निर्देश एक अलग गुंजाइश बनाता है । इसे यहां देखें: https://github.com/angular-ui/bootstrap/blob/2.1.3/src/pagination/pagination.js#L126
और इस डॉक्स:
क्षेत्र
{...} (कोई ऑब्जेक्ट हैश): एक नया "अलग" क्षेत्र निर्देश "s तत्व के लिए बनाया गया है ।"अलग" क्षेत्र में सामान्य क्षेत्र से भिन्न है कि यह इसके पैरेंट क्षेत्र से इनहेरिट prototypically नहीं है ।पुन: उपयोग योग्य घटक, जो दुर्घटनावश नहीं पढ़ा या पैरेंट क्षेत्र में डेटा को संशोधित करना चाहिए बनाते समय यह उपयोगी है ।
इसका मतलब है, विधि ShouldHighlightPage अपने ओवरराइड किए गए टेम्पलेट के दायरे में उपलब्ध नहीं होंगे.
एक तत्काल समाधान (अनुशंसित नहीं, आप एक क्लीनर समाधान हो रही है) में अपनी विधि रजिस्टर है $rootScope:
$rootScope.ShouldHighlightPage = function (pageNum)
{
return true;
}
</ हड़ताल>
इस समस्या को हल करने के लिए, कस्टम निर्देश जोड़ें:
myApp.directive("uibCustomPagination", function () {
return {
restrict: "A",
require: "uibPagination",
link: function ($scope, $element, $attr, uibPaginationCtrl) {
uibPaginationCtrl.ShouldHighlightPage = function (pageNum) {
return true;
};
}
}
});
यह निर्देश मूलतः के नियंत्रक के लिए अपने विधि इंजेक्शन है uib-pagination निर्देश ताकि यह आपके टेंपलेट में उपलब्ध हो सकता है ।
अब, बस लागू uib-custom-pagination निर्देशन अपने ul तत्व:
<ul uib-pagination uib-custom-pagination ng-model="source_pagination.current"
template-url="pagination.html" total-items="source_pagination.total_pages"
items-per-page="1" max-size="source_pagination.max_items" class="pagination-sm"
force-ellipses="true" direction-links="false" ng-change="source_page_changed()"></ul>