Динамическое имя функции в директиве AngularJS

Question

Динамическое имя функции в директиве AngularJS

0

Ниже приведена моя Pagination Directive

angular.module('frontendApp')
    .directive('postsPagination', function() {
        return{
            restrict: 'E',
            template: '<ul class="pagination">'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(1)">&laquo;</a></li>'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(currentPage-1)">&lsaquo; Prev</a></li>'+
            '<li ng-repeat="i in range" ng-class="{active : currentPage == i}">'+
            '<a href="javascript:void(0)" ng-click="getList(i)">{{i}}</a>'+
            '</li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(currentPage+1)">Next &rsaquo;</a></li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(totalPages)">&raquo;</a></li>'+
            '</ul>'
        };
    });

Я хочу, чтобы имя функции в ng-click было динамическим. I: e ng-click = getList

Aparna 05 окт. 2015, в 14:52

Источник

0

Привет, Апарна, не могли бы вы уточнить, что именно вы подразумеваете под динамикой.
jsNovice 05 окт. 2015, в 12:36
0

Привет, динамический в том смысле, имя функции должно быть изменяемым. В настоящее время имя моей функции фиксировано. Так что я не могу использовать ту же директиву для другой нумерации страниц с другой функцией.
randomSoul 05 окт. 2015, в 12:41

Теги:

angularjs

angularjs-directive

3 ответа

Ещё вопросы

Привет, Апарна, не могли бы вы уточнить, что именно вы подразумеваете под динамикой.
Привет, динамический в том смысле, имя функции должно быть изменяемым. В настоящее время имя моей функции фиксировано. Так что я не могу использовать ту же директиву для другой нумерации страниц с другой функцией.

jsNovice · Answer 1 · 2015-10-05T10-35-00.000Z

directive.html

<ul class="pagination">
<li ng-show="currentPage != 1">
    <a href="javascript:void(0)" ng-click="getList(1)">&laquo;</a></li>
<li ng-show="currentPage != 1">
    <a href="javascript:void(0)" ng-click="getList(currentPage-1)">&lsaquo; Prev</a></li>
<li ng-repeat="i in range" ng-class="{active : currentPage == i}">
    <a href="javascript:void(0)" ng-click="getList(i)">{{i}}</a></li>
<li ng-show="currentPage != totalPages">
    <a href="javascript:void(0)" ng-click="getList(currentPage1)">Next &rsaquo;</a></li>
<li ng-show="currentPage != totalPages">
    <a href="javascript:void(0)" ng-click="getList(totalPages)">&raquo;</a></li>

controller1.js

angular
    .module('frontendApp')
    .controller('Ctrl1', function(){
       $scope.getList = function(){} // your implementation 1 here 
    });

controller2.js

angular
.module('frontendApp')
.controller('Ctrl2', function(){
   $scope.getList = function(){} // your other implementation here 
});

Теперь используйте один и тот же html файл в обоих местах и просто изменив имя контроллера. Ypu может иметь разные реализации для одной и той же функции, таким образом повторно используя ваш шаблон:

angular.module('frontendApp')
.directive('postsPagination', function() {
    return{
        restrict: 'E',
        templateUrl: 'directive.html',
        controller: 'Ctrl1'
    };
});
angular.module('frontendApp')
.directive('someOther', function() {
    return{
        restrict: 'E',
        templateUrl: 'directive.html',
        controller: 'Ctrl2'
    };
});

Joe · Answer 2 · 2015-10-05T10-31-00.000Z

Вы можете использовать метод javascript eval().

Функция eval позволяет динамически выполнять исходный код JavaScript.

Чтобы превратить строку имени функции в выражение javascript, cyou может использовать метод eval() следующим образом:

var dateFn = "Date(1971,3,8)";
var myDate;
eval("myDate = new " + dateFn + ";");

document.write(myDate);

// Output: Thu Apr 8 00:00:00 PDT 1971

Ссылка на MSDN

Emir Marques · Answer 3 · 2015-10-05T09-57-00.000Z

Посмотрите это: https://jsfiddle.net/n9KNv/14/

Используйте компилятор $ для углового интерпретации ng-click в директиве. Как это

angular.module('frontendApp')
    .directive('postsPagination', function(){
        return{
            restrict: 'E',
            template:  $compile('<ul class="pagination">'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(1)">&laquo;</a></li>'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(currentPage-1)">&lsaquo; Prev</a></li>'+
            '<li ng-repeat="i in range" ng-class="{active : currentPage == i}">'+
            '<a href="javascript:void(0)" ng-click="getList(i)">{{i}}</a>'+
            '</li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(currentPage+1)">Next &rsaquo;</a></li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(totalPages)">&raquo;</a></li>'+
            '</ul>');
        };
    });